使用图像标签加载svg时，无法播放从悬停开始的svg动画 [英] Svg animation that starts on hover doesn't play when the svg is loaded using image tag
问题描述
我有以下动画:
如果单击该链接，则将鼠标悬停在该链接上就会开始播放.
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>这篇关于使用图像标签加载svg时，无法播放从悬停开始的svg动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
