Mudanças entre as edições de "Predefinição:TesteMapaTrilha"
Ir para navegação
Ir para pesquisar
| Linha 1: | Linha 1: | ||
<includeonly> | <includeonly> | ||
<!-- | <div class="map-container" style="position: relative; width: 600px;"> | ||
< | <!-- Sua imagem de fundo (ex: um mapa de parque ou RPG) --> | ||
< | <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%;"> | |||
<!-- O caminho da trilha --> | |||
</ | <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> | |||
</includeonly> | </includeonly> | ||