如何为SVG添加链接？为何img标签引用的SVG文件内链接会失效？

问题根因 #

• 浏览器安全策略限制：通过<img>标签加载的SVG会被识别为静态图像资源，默认禁用SVG内部所有交互能力，包括原生<a>链接跳转、hover交互、脚本执行等，所以内部链接会直接失效。
• 你遇到的悬停卡顿问题，就是SVG内部的hover状态变换被img的安全规则拦截，事件响应异常导致的状态切换混乱。

可用解决方案 #

方案1：外层包裹a标签（适合整个SVG指向同一个链接） #

不需要修改SVG源文件，直接在外层套HTML的<a>标签即可，代码示例：

<a href="你的跳转地址">
  <img src="example.svg" alt="资源描述">
</a>

方案2：改用object标签引入SVG（适合保留SVG内部分区域链接、原生交互） #

用<object>标签加载SVG时，浏览器不会禁用SVG内部的交互能力，原SVG内写的<a>标签、hover效果都能正常运行，代码示例：

<object type="image/svg+xml" data="example.svg" alt="资源描述"></object>

方案3：内联SVG代码到HTML中（灵活度最高，支持自定义交互） #

直接把SVG的源码复制到HTML文件里，不仅内部原生链接、交互完全正常，还可以直接用HTML的CSS、JS自定义控制SVG的样式和行为，适合需要复杂交互的场景。

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