Area Map mit SVG

SVG für Area Maps

Mit dem Erscheinen der mobilen Geräte war die klassische HTML Area Map zunehmend vom Schirm verschwunden, denn die Navigation über die Hotspots der Image Map wird absolut in Pixel-Koordinaten angegeben. Mit SVG kehrt die Image Map zurück.

• Area Maps bilden aber durchaus eine sinnvolle und kompakte Benutzerschnittstelle für Diagramme, Lagepläne, Raumplanung und Liegenschaftskarten.
• SVG ist einfach an die Größe des Viewports anzupassen und die Hotspots bleiben bei den Anpassungen der Grafik an das Browserfensters intakt.
• Da SVG mit PHP und Javascript erzeugt werden kann, ist die Erstellung von großen Karten und Lageplänen mit SVG automatisierbar.

Weil CSS bei SVG genauso wirkt wie bei HTML, sind Übergänge und kleine Animationen kein Thema. SVG importiert Fotos und Bitmap-Bilder und kann neben SVG-Grafiken auch Landkarten, Handzeichnungen oder Fotos als Grundlage einbinden. Die meisten CAD-Programme können SVG direkt exportieren.

Hotspots erzeugen

Die Hotspots werden als SVG-Formen angelegt, z.B. in Inkscape, einem Open Source Programm für Vektorgrafik, ähnlich wie Adobe Illustrator (mit dem SVG Area Maps natürlich auch eingezeichnet werden können).

Auch Photoshop kann in den neueren Versionen Pfade als SVG exportieren.

Das Bild kann sowohl als Base64 direkt in die SVG-Datei eingebettet werden. Bei großen Bildern wächst die Bildgröße bei der Transformation zu Base64 allerdings mächtig an und es ist besser, das Bild als externe Ressource in die SVG-Datei einzubinden.

Area Map mit Einblendungen

Im Lageplan der historischen Landschänke werden Texte zu den Räumen eingeblendet.

<path id="gaststube" class="shape" d="m148.1 259.5l1.2 128.7h-105.6l1.23-128.7z"/>
<text class="label" 
      id="text-gaststube">Gaststube – Platz für rd. 10 Gäste</text>

path-Elemente mit der CSS-Klasse shape sind über die Namen der IDs mit dem einzublendenden text-Element verbunden.

Hotspots mit IDs versehen

Die Formen der Hotspots sind Pfade, Kreise oder Rechtecke. Wichtig ist nur, dass jeder Hotspot eine ID bekommen, damit er von Javascript eindeutig identifiziert werden kann.

<path id="poggendehl" class="shape" d="m202.8 241.3v36.4l23 2.4 1.3 57.1 91 2.4 3.7-95.9z"/>
<text class="label" id="text-poggendehl" x="50" y="720" font-size="48">Poggendehl – Kleine Familienfeiern</text>

Wenn die Image Map auf andere Seiten leitet, muss für jeden Hotspot ein Link gesetzt werden. SVG Links sehen kaum anders aus als HTML-Links (nur xlink:href anstelle von href). Sie führen zu den angepeilten Adresse, falls die Image Map zur Navigation eingesetzt wird.

<a xlink:href="landschaenke.olde-koek-raum.html">
   <path id="oldekoek" d=" … " />
</a>

Javascript für Area Maps

Wenn die Area Map anstelle von Links zu anderen Seiten Einblendungen zeigt, setzen einige Zeilen Javascript die CSS-Transitions der Image Map in Gang.

const shape = document.querySelectorAll (".shape");
const label = document.querySelectorAll(".label");

for (const item of shape) {
	item.addEventListener ("click", function () {
		for (const elem of label) {
			elem.classList.remove("toggle");
		}
		document.querySelector("#text-" + item.id).classList.add("toggle");
	})
}

document.getElementById("text-" + this.id) sucht das Element mit derselben ID und dem Präfix text-, so muss nicht jedes Element einzeln angesprochen werden.

CSS für die Area Map

CSS Regeln werden genauso wie bei HTML in ein style-Tag am Anfang der SVG-Datei eingesetzt.

<svg height="100%" width="100%" viewBox="0 0 1043 787">

<style>
  .shape { cursor:pointer; fill-opacity: 0; }
  .label { fill: hsl(120,50%,20%); opacity: 0; transition: opacity 1s; }
  .toggle {opacity: 1}
</style>

<image xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAA…5//Z " height="787" width="1043" y="-1.114" x="4.186" preserveAspectRatio="none"/>

SVG Area Map einbinden

Obwohl SVG auch in einem img-Tag geladen werden kann, muss SVG entweder direkt ins HTML gesetzt werden oder als iFrame in die Seite geladen werden, denn mit einem img-Tag wird kein Javascript in SVG ausgeführt.