2

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.

Kasper
  • 12,594
  • 12
  • 41
  • 63

1 Answers1

5

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>
ccprog
  • 20,308
  • 4
  • 27
  • 44
  • btw am I right to say that once SVG is inserted into img tag it sort of becomes a "raster" image as if we would draw SVG into html canvas and hence all the scripting is no longer viable? – Sergey Rudenko May 03 '18 at 15:08
  • 1
    Not completely. If the image has animations that do not depend on user interaction, [they will still run](https://stackoverflow.com/questions/46050871/css-animation-do-not-work-for-svg-in-img). You can even trigger something from outside [via an image swap/reload](https://stackoverflow.com/questions/27215274/svg-animations-wont-work-after-import-as-a-background-image/27215399#27215399). – ccprog May 03 '18 at 15:48