Beispiel:SVG-responsive-imagemap-2.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<style>
svg {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
}
</style>
<title>Frühlingsgruß</title>
</head>
<body>
<figure id="imagemap">
<svg viewBox="0 0 1504 1000" >
<defs>
<symbol id="tooltip" >
<path d="M10,10 h350 a15,15 0 0,1 15,15 v50 a15,15 0 0,1 -15,15 h-225 l-30,50 l-10,-50 h-70 a15,15 0 0,1 -15,-15z"
fill="hsl(80 45% 80%)" stroke="hsl(80 45% 30%)" stroke-width="1" />
</symbol>
<style>
svg a, .info {
opacity: 0;
}
svg a:hover ~ .info {
opacity: 1;
transition: all 0.5s linear;
}
.info > use {
fill:#d4e3b5;
stroke: #586f2a;
stroke-width: 1;
}
text {
text-anchor: middle;
font-size: 36px;
font-family: sans-serif;
}
tspan {
font-size: 80%;
font-style: italic;
}
</style>
</defs>
<image width="1504" height="1000" href="https://upload.wikimedia.org/wikipedia/commons/9/92/Colorful_spring_garden.jpg">
<title>Colourful Spring Garden</title>
</image>
<g>
<a href="https://de.wikipedia.org/wiki/Gartenhyazinthe">
<path id="hyacinth" d="M0,1000 v-300 l50,50 l15-50 l25,-25 l25,100 l65-150 l225,225 l-50,150 z" />
</a>
<g class="info" transform="translate(100,500)">
<use href="#tooltip" />
<text x="200" y="45">Gartenhyazinthe<tspan dx="-9.2em" dy="1.2em">Hyacinthus orientalis</tspan></text>
</g></g>
<g><a href="https://de.wikipedia.org/wiki/Gelbe_Narzisse">
<circle id="daffodil" cx="365" cy="340" r="125" />
</a>
<g class="info" transform="translate(250,120)">
<use href="#tooltip" />
<text x="190" y="45">Osterglocke<tspan dx="-10em" dy="1.2em">Narcissus pseudonarcissus</tspan></text>
</g></g>
<g>
<a href="https://de.wikipedia.org/wiki/Tulpen">
<path id="tulipan" d="M540,490 h250 v30 l-80,100 h-200 z m450,50 l-50,30 l-50,80 v30 l50,50 h100 l50,-50 z m20,300 l-45,180 h100 l70-200 z m200-130 h100 l70,70 v50 l-80,80 l-100,-50 z m-300-580 l50,-50 l200,100 l-30,120 l-50,50 h-50 l-150,-100" />
</a>
<g class="info" transform="translate(1000,20)">
<use href="#tooltip" />
<text x="150" y="45">Tulpe<tspan dx="-3.2em" dy="1.2em">Tulipae</tspan></text>
</g></g>
<g>
<a href="https://de.wikipedia.org/wiki/Wei%C3%9Fe_Narzisse">
<path id="narciss" d="M0,550 v-170 h100 l-30,100 z m300,0 h200 v150 h-200 z m640,-180 h100 l250,180 v100 h100 v100 h100 v100 z m0,0 l70,250 h150 v100 l150,-30z" />
</a>
<g class="info" transform="translate(1110,330)">
<use href="#tooltip" />
<text x="200" y="45">Weiße Narzisse<tspan dx="-8.5em" dy="1.2em">Narcissus poeticus</tspan></text>
</g></g>
</svg>
<figcaption>Colourful Spring Garden - Klicke auf die Köpfe!<br><small>Quelle: <a href="https://commons.wikimedia.org/wiki/File:Colorful_spring_garden.jpg">Colourful Spring Garden (Wikimedia Commons)</a></small></figcaption>
</figure>
</body>
</html>
