Menu
I don't want to add a link to a svg (which is not possible because the svg isn't provided by me), but want to add a link like <a href=""><img src="foo.svg"/></a>. Only that this time it is not an img, but a object (so I can include a svg).
It works with some browser, but for example not with firefox. What is the default idea how to do something like that?
288
SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document.
SVG's <a> element is a container, which means you can create a link around text (like in HTML) but also around any shape.
The xlink:href attribute defines a reference to a resource as a reference IRI. The exact meaning of that link depends on the context of each element using it. Note: SVG 2 removed the need for the xlink namespace, so instead of xlink:href you should use href .
In Firefox <object> captures all the clicks and doesn't let them "bubble" out of the SVG document. A sensible workaround is to cover the SVG with another element that gets the click first.
Fortunately this can be done with pure CSS:
a {position:relative; display:inline-block;}
a:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0;}
You might want to add :-moz-any-link pseudo-class to the selector to make it Gecko-only.
130
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
