如何在 HTML 中使用外部 SVG？答案

【问题标题】：How to use external SVG in HTML?如何在 HTML 中使用外部 SVG？
【发布时间】：2015-04-23 12:41:53
【问题描述】：

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

如果我使用：

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

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

【问题讨论】：

标签： html css svg

【解决方案1】：

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

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

【讨论】：

不用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 操作它。我认为这不是一个好的解决方案。