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; }...')
 
 
(2 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<style>
<includeonly>
  /* Container que segura a imagem e o SVG */
  .mapa-container {
    position: relative;
    width: 500px; /* Ou 100% para responsividade */
    height: 300px;
  }
 
  /* A imagem do mapa */
  .mapa-base {
    width: 100%;
    height: 100%;
  }
 
  /* O SVG sobreposto */
  .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>


<div class="map-container" style="position: relative; width: 600px;">
<div class="map-container" style="position: relative; width: 600px;">
Linha 66: Linha 31:
   <circle cx="600" cy="100" r="6" fill="red" />
   <circle cx="600" cy="100" r="6" fill="red" />
</svg>
</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 atual tal como às 19h06min de 10 de abril de 2026