如何在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?