使用img标签加载的SVG悬停动画无法触发问题求助

我来帮你搞定这个头疼的问题！首先得搞明白为啥会这样：当你用<img>标签加载SVG时，浏览器会把它当成一个独立的“替换元素”——简单说就是SVG内部的DOM结构、样式（包括:hover触发的动画）完全和外部页面隔离开了，外部的鼠标悬停事件根本传不到SVG内部，自然就触发不了动画。

下面给你几个不需要直接把SVG代码嵌进HTML的可行方案，按靠谱程度排序：

方案1：用<object>替代<img>（最推荐） #

这是最直接有效的办法，<object>标签会完整保留SVG的内部交互能力，而且用法和<img>差不多，不需要改SVG内容：

<object type="image/svg+xml" data="你的SVG文件路径.svg">
  <!-- 浏览器不支持SVG时的降级内容 -->
  <img src="你的SVG文件路径.svg" alt="备用图片">
</object>

换成这个标签后，鼠标悬停时事件会正常传递到SVG内部，原本的悬停动画就能正常播放了。

方案2：给SVG加CSS变量控制动画（适合不能用object的场景） #

如果因为软件限制没法用<object>，可以修改你的SVG文件，用CSS变量来控制动画的启停，然后在外部页面通过父元素的:hover来切换变量：

1. 打开你的SVG，把原本的:hover触发逻辑改成用CSS变量控制：

   <style>
     /* 假设你原本的动画是这样的 */
     /* .animated-element:hover { animation: spin 1s linear infinite; } */
   
     /* 修改成用变量控制 */
     :root {
       --is-hovered: 0;
     }
     .animated-element {
       animation: spin 1s linear infinite paused;
       /* 根据变量决定动画是否运行 */
       animation-play-state: var(--is-hovered) == 1 ? running : paused;
     }
   </style>
   

2. 在HTML页面里，给<img>套个容器，然后给容器加:hover样式来切换变量：

   <div class="svg-wrapper">
     <img src="你的SVG文件路径.svg" alt="描述文本">
   </div>
   
   <style>
     .svg-wrapper:hover {
       --is-hovered: 1;
     }
   </style>
   

这个方案需要你的SVG支持CSS变量（现代浏览器都没问题），而且得能修改SVG文件内容。

方案3：用iframe加载SVG（备选） #

如果上面两个都不行，还可以用<iframe>来加载SVG，它也能保留SVG的交互能力：

<iframe src="你的SVG文件路径.svg" frameborder="0" style="width: 你的宽度; height: 你的高度;"></iframe>

不过iframe会带来一些布局上的小麻烦，比如需要手动设置宽高，所以优先用前面两个方案。

总结一下，最省心的就是换成<object>标签，几乎零成本就能解决问题～

内容的提问来源于stack exchange，提问作者Kasper