如何在 HTML 中使用外部 SVG？

Question

我尝试制作一个引用 SVG 文件的 HTML，该 SVG 文件是交互式的（CSS 悬停）：

1. 如果我使用 <img src="algerie.svg"> 我会失去交互性。

2. 如果我使用开发工具在新标签页中打开这张图片，它就会变成交互式的。

3. 如果我使用：

   <svg viewBox="0 0 512 512">
     <use xlink:href="algerie.svg"></use>
   </svg>
   

然后什么都不显示，更糟糕的是，Chrome 或 Firefox 没有在网络开发工具中检测到该文件。

Answer 1

您应该使用 <object> 标签嵌入图像：

<object data="algerie.svg" type="image/svg+xml"></object>

详情参考这个问题：Do I use <img>, <object>, or <embed> for SVG files?