如何在 HTML 中使用外部 SVG？

Posted 2023-03-06

【中文标题】如何在 HTML 中使用外部 SVG？

【英文标题】：How to use external SVG in HTML?

【发布时间】：2015-04-23 12:41:53

【问题描述】：

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

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

如果我使用开发工具在新选项卡中打开此图片，它会变成交互式的。

如果我使用：

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

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

【问题讨论】：

这能回答你的问题吗？ Do I use <img>, <object>, or <embed> for SVG files?

【参考方案1】：

你应该使用<object>标签嵌入图片：

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

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

【讨论】：

不用type="image/svg+xml"，最好配合width和height属性使用！

假设SVG有<path>或<polygon>或<line>等元素。是否可以通过<object> 方法为这些元素设置fill 或stroke 属性？

@HemantArora 是的，你可以！您可以选择元素以更改其属性，就像普通的 html 元素一样。此外，您还可以将类绑定到要更改的元素。你可以查看这篇文章了解更多详情https://benfrain.com/selecting-svg-inside-tags-with-javascript/

当使用 CSS 加载到 OBJECT 标记中时，您实际上无法操作任何 SVG 元素，因为对象将 SVG 加载到它自己的文档中，因此 CSS 无法访问它。但是，您可以使用 JS 操作它们，这不是一个非常干净的解决方案，而且您必须执行其他操作，例如等待图像加载然后使用 JS 操作它。我认为这不是一个好的解决方案。