Wie macht man einen Link von aussen um eine SVG?
bearbeitet von Gunnar Bittersmann@@draupnir
> Leider musste ich feststellen, dass unter macOS in jedem Browser der Link gar nicht geht.
Doch, geht bei mir. Das `object` (gepunktete Linie im Codepen) sitzt auf der Grundlinie; die Unterlänge darunter ist clickbar – wie unter Windows:
> Unter Windows ist nur ein schmaler Streifen unten auf der SVG anklickbar.
Keine Ahnung, warum das so ist.
> Wie kann ich das Problem über <a> lösen?
```css
a { display: inline-block }
object { pointer-events: none }
```
☞ [Codepen 1](https://codepen.io/gunnarbittersmann/pen/LYGxNKd)
Browser-Support siehe [Can I Use](https://caniuse.com/#feat=pointer-events)(bspw. nicht in IE ≤ 10).
Wie sich Browser, die kein SVG nicht unterstützen, bei der Verlinkung verhalten, musst du selbst testen; ich habe keinen solchen.
Die Frage bleibt – Jürgen stellte sie schon: Wozu braucht Gott ein Raumschiff?
Äh, wozu brauchst du ein Rastergrafik-Fallback?
Und wenn du einen brauchen solltest, dann ist das [`picture`-Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) dein Freund:
☞ [Codepen 2](https://codepen.io/gunnarbittersmann/pen/zYrNBvE)
Hier greift der Fallback, wenn der Browser den Medientypen `image/svg+xml` nicht kennt; nicht aber, wenn die SVG-Ressource nicht geladen werden kann.
🖖 Stay hard! Stay hungry! Stay alive! **Stay home!**
{:@en}
--
*“Turn off CSS. If the page makes no sense, fix your markup.”* —fantasai
{:@en}