html - 如何在 HTML 中使用外部 SVG？

Question

我尝试制作一个引用 SVG 文件的 HTML，该 SVG 文件是交互式的(CSS 悬停):

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

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

1. 如果我使用:

   <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?