使用图像标签加载svg时,无法播放从悬停开始的svg动画

问题描述:

我有以下动画:

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

如果单击该链接,则将鼠标悬停在该链接上就会开始播放.

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

但是,当我使用image标记将svg加载到页面上时(如下所述),悬停事件似乎没有到达svg图像.

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.

是否可以通过某种方式执行此操作?不能将svg直接粘贴到html页面中,因为我使用的软件不允许这样做.

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.

根据设计,图像不会公开DOM,并且其内容无法接收鼠标事件.悬停事件的目标是< img> 元素本身.您可以改用< object> < iframe> 标签.然后将SVG作为子文档插入,用户可以与之交互.

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>