Predefinição:TesteMapaTrilha

<style>

 /* 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>

 <img src="https://wiki.gla.com.br/images/9/9b/Bau_foosha_01.png" style="width: 100%; display: block; filter: brightness(0.8);">

 <svg viewBox="0 0 600 400" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
   <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%;">
 <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"/>

 <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>

<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>