使用图像标签加载 svg 时，悬停时开始的 Svg 动画不播放

【问题标题】：Svg animation that starts on hover doesn't play when the svg is loaded using image tag使用图像标签加载 svg 时，悬停时开始的 Svg 动画不播放
【发布时间】：2018-10-13 12:18:25
【问题描述】：

我有以下动画：

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

如果您单击该链接，您将看到它在悬停后开始播放。

但是，当我使用图像标签在页面上加载 svg 时，如下所示，悬停事件似乎没有到达 svg 图像。

有可能以某种方式做到这一点吗？将 svg 直接粘贴到 html 页面中不是一种选择，因为我使用的软件不允许这样做。

【问题讨论】：

标签： svg css-animations

【解决方案1】：

图像设计不暴露 DOM，其内容无法接收鼠标事件；悬停事件的目标是<img> 元素本身。您可以改用<object> 或<iframe> 标签。然后将 SVG 作为子文档插入，用户可以与之交互。

&lt;object data="https://svgur.com/i/6XH.svg" width="322px" height="65px"&gt;&lt;/object&gt;

【讨论】：

顺便说一句，我是否正确地说，一旦将 SVG 插入到 img 标签中，它就会变成“光栅”图像，就好像我们将 SVG 绘制到 html 画布中一样，因此所有脚本都不再可行？
不完全。如果图像具有不依赖于用户交互的动画，they will still run。你甚至可以从via an image swap/reload外部触发一些东西。