Wie macht man einen Link von aussen um eine SVG?

[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?

a { display: inline-block }
object { pointer-events: none }

☞ Codepen 1

Browser-Support siehe Can I Use (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 dein Freund:

☞ Codepen 2

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!