如何通过访问 css 样式在 html 中引用 SVG

Question

我的项目（Angular 10）中包含了许多不同的 SVG。 其中一些以不同的大小和填充颜色等多次使用。

我正在尝试找到一种方法在我的 html 代码中引用它们并通过样式访问：

CSS：

.svg {
  fill: red;
}

参考：

<svg>
   <use></use>
</svg>

<object></object>

<img></img>

<embed></embed>

到目前为止，我还没有找到一种解决方案，既可以让我引用它们，又可以像添加内联时那样访问 SVG 本身的填充属性。

内联：

<svg>
   <path>
   </path>
</svg>

内联添加它们会很麻烦。

这通常是如何处理的？

感谢您的帮助！

Answer 1

你不能。 CSS 不适用于跨文档边界。如果 CSS 规则在 HTML 中（或通过<link> 导入到 HTML 中），那么它不会影响外部文件的内容。

人们过去使用的一种解决方案是use a bit of Javascript to inline SVG files at runtime。

否则，您需要将 CSS 放入外部 SVG 本身。