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

标签 svg css-animations

我有以下动画:

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

如果您点击该链接,您将看到将鼠标悬停在该链接上后它就会开始播放。

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

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

最佳答案

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

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

关于使用图像标签加载 svg 时,从悬停开始的 Svg 动画不会播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50150725/

相关文章:

javascript - 不知道如何正确关闭 SVG/d3.js 中的路径

java - 缩放两个项目

java - 在java中从许多小svg文件创建SVG文件

css - SVG 没有响应,打破了容器

html - 悬停时 Div 动画

css - 具有立方贝塞尔定时功能 CSS 的平滑圆形动画

javascript - 如何通过鼠标移动在 SVG 上绘制矩形?

javascript - 我希望我的菜单图标与汉堡菜单重叠

css - Webkit CSS 动画问题 - 坚持动画的结束状态?

css - 使用具有渐变背景的 CSS3 过渡