Sometimes, we want to make an HTML SVG object also a clickable link with CSS.
In this article, we’ll look at how to make an HTML SVG object also a clickable link with CSS.
How to make an HTML SVG object also a clickable link with CSS?
To make an HTML SVG object also a clickable link with CSS, we disable pointer events on the object element.
For instance, we write
<a href="http://www.google.com/">
<object data="mysvg.svg" type="image/svg+xml">
<span>Your browser doesn't support SVG images</span>
</object>
</a>
to add the object element.
Then we write
object {
pointer-events: none;
}
to disable pointer events on the object element.
Conclusion
To make an HTML SVG object also a clickable link with CSS, we disable pointer events on the object element.
