SVG Links | mediaevent.de

Links in externen SVG-Dateien

Klick- bzw. touchbare Links funktionieren allerdings nicht, wenn eine externe SVG-Datei mit HTML img eingebunden wird. Die Grafik muss entweder als object, iframe oder inline in die HTML-Seite eingebettet sein.

Mit SVG 2.0 wird das veraltete xlink:href-Attribut zu einem einfach href. Externe Grafiken werden ohne xlink-Namespace nicht angezeigt und die Fehlermeldung erscheint:

Namespace prefix xlink for href on a is not defined

Dabei werden Textlinks nicht wie in HTML automatisch unterstrichen, sondern zeigen sich nur beim Hovern mit der Maus durch den Hand-Cursor. Erst ein text-decoration: underline, farbliches Herausstellen mit style-Attributen des a-Tags bringt den Link optisch zum Vorschein.

<a xlink:href=""> … </a>

<svg>
…
   <a href="/tutorial/svg.html">
      <text font-size="61" y="225" x="28" fill="#ffb380">LINK</text>
   </a>
   
   oder
   
   <text font-size="61px" y="225" x="28" fill="#ffb380">
      <a href="/tutorial/svg.html">LINK</a>
   </text>
   
…
</svg>

Wenn die SVG-Grafik in einem HTML-Dokument liegt, reicht ein einfaches SVG <a href=""> – xmlns:xlink="http://www.w3.org/1999/xlink" muss nicht im SVG-Tag notiert werden werden.

Links auf SVG-Formen und Gruppen

Genauso wieder wie bei HTML funktionieren klickbare Links in SVG nicht nur auf Text, sondern auf allen Elementen: rect, circle, path und group.

Fast immer es sogar besser, Links nicht auf SVG-Text zu setzen, denn der Text bildet keinen geschlossenen Block wie Text in HTML, sondern ein Klick muss schon den Strich der Zeichen treffen.

<a href="/tutorial/svg.html">
<g id="leafe" style="cursor:pointer">
  <path style="fill:hsl(190,30%,50%);stroke:hsla(190,60%,50%,0.2);stroke-width:14" d="…" />
  <path style="fill:hsl(190,30%,80%)" d="…" />
  <path id="overlay" style="fill:hsla(0,0%,100%,0.2)" d="…" />
</g>
</a>
<a href="/tutorial/svg-viewbox-koordinaten.html">
  <use transform="translate(6,580) rotate(-90)" href="#leafe" />
</a>

Das gilt auch für die Klick- und Touchziele in animierten SVGs:

<text y="46" x="29" fill="#f36841">Hosting</text>
<text fill="#95ba4c" x="29" y="84">Themes</text>
<text fill="#00a2c4" x="29" y="122">Plugins</text>
<rect id="hosting" fill-opacity="0" style="cursor:pointer" x="29" y="18" width="100" height="35"  />
<rect id="themes" fill-opacity="0" style="cursor:pointer" x="29" y="58" width="100" height="35"  />
<rect id="plugins" fill-opacity="0" style="cursor:pointer"x="29" y="98" width="100" height="35"  />

Darum liegen hier Rechtecke mit fill-opacity="0" über dem Text. Sie vergrößern die klick-sensitive Fläche für die Javascript-Animation.