CODEWITHSUNDEEP
svgcss-animations
Kasper
Kasper

Reputation: 13592

Svg animation that starts on hover doesn't play when the svg is loaded using image tag

I have the following animation:

https://svgur.com/i/6XH.svg

If you click on the link, you will see that it starts playing once you hover it.

However, when I load the svg on a page using the image tag, as done below, the hover event doesn't seem to reach the svg image.

Is it possible to do this somehow? It is not an option to paste the svg directly in the html page, because the software I use don't allow for that.

Upvotes: 2

Views: 868

Answers (1)

ccprog
ccprog

Reputation: 21821

Images by design do not expose a DOM and their content cannot receive mouse events; the target of the hover event is the <img> element itself. You can use an <object> or an <iframe> tag instead. The SVG is then inserted as a subdocument that users can interact with.

<object data="https://svgur.com/i/6XH.svg" width="322px" height="65px"></object>

Upvotes: 5

Related Questions