Mudanças entre as edições de "Predefinição:TesteMapaTrilha"

De Wiki Gla
Ir para navegação Ir para pesquisar
(Criou página com '<style> →‎Container que segura a imagem e o SVG: .mapa-container { position: relative; width: 500px; →‎Ou 100% para responsividade: height: 300px; }...')
 
Linha 1: Linha 1:
<includeonly>
<!-- CSS Específico para esta predefinição -->
<style>
<style>
  /* Container que segura a imagem e o SVG */
    .meu-container {
  .mapa-container {
        border: 2px solid #3366cc;
    position: relative;
        background-color: #f8f9fa;
    width: 500px; /* Ou 100% para responsividade */
        padding: 15px;
    height: 300px;
        border-radius: 8px;
  }
        font-family: sans-serif;
 
    }
  /* A imagem do mapa */
    .meu-titulo {
  .mapa-base {
        color: #3366cc;
    width: 100%;
        margin-top: 0;
    height: 100%;
        font-weight: bold;
  }
     }
 
     .meu-corpo {
  /* O SVG sobreposto */
        color: #333;
  .mapa-overlay {
     }
    position: absolute;
    top: 0;
    left: 0;
     width: 100%;
     height: 100%;
  }
 
  /* Estilização interativa do path */
  .area-mapa {
    fill: rgba(0, 0, 255, 0.3); /* Cor transparente inicial */
    stroke: blue;
    stroke-width: 2;
    cursor: pointer;
    transition: fill 0.3s;
  }
 
  .area-mapa:hover {
     fill: rgba(0, 0, 255, 0.6); /* Cor ao passar o mouse */
  }
</style>
</style>


<div class="map-container" style="position: relative; width: 600px;">
<!-- Estrutura HTML -->
  <!-- Sua imagem de fundo (ex: um mapa de parque ou RPG) -->
<div class="meu-container">
  <img src="https://wiki.gla.com.br/images/9/9b/Bau_foosha_01.png" style="width: 100%; display: block; filter: brightness(0.8);">
     <h2 class="meu-titulo">{{{titulo|Título Padrão}}}</h2>
 
    <div class="meu-corpo">
  <svg viewBox="0 0 600 400" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
        {{{conteudo|Insira o texto aqui.}}}
     <!-- O caminho da trilha -->
    </div>
    <path d="M50,300 Q150,50 300,200 T550,100"
          fill="none"
          stroke="#FFD700"
          stroke-width="4"
          stroke-linecap="round"
          class="trilha-pontilhada" />
  </svg>
  <svg viewBox="0 0 800 400" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; width: 100%;">
  <!-- A trilha que liga os pontos -->
  <path id="trilha"
        d="M 50,350 L 200,250 L 400,300 L 600,100"
        fill="none"
        stroke="#FFD700"
        stroke-width="4"
        stroke-dasharray="1, 10"
        stroke-linecap="round"
        class="trilha-pontilhada"/>
 
  <!-- Marcadores nos pontos de parada -->
  <circle cx="50" cy="350" r="6" fill="red" />
  <circle cx="200" cy="250" r="6" fill="red" />
  <circle cx="400" cy="300" r="6" fill="red" />
  <circle cx="600" cy="100" r="6" fill="red" />
</svg>
 
</div>
</div>
 
</includeonly>
<style>
  .trilha-pontilhada {
    /* O primeiro número é o tamanho do ponto, o segundo é o espaço */
    stroke-dasharray: 1, 12;
    filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.5));
    animation: caminhar 20s linear infinite;
  }
 
  /* Opcional: Animação para a trilha "se mexer" */
  @keyframes caminhar {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
  }
</style>

Edição das 18h59min de 10 de abril de 2026

Disponível em “https://wiki.gla.com.br/index.php?title=Predefinição:TesteMapaTrilha&oldid=45969”