How to make an HTML SVG object also a clickable link with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *