时间戳

首页 > 解决方案 > 如何通过访问 css 样式在 html 中引用 SVG

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

问题描述

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

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

CSS：

.svg {
  fill: red;
}

参考：

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

<object></object>

<img></img>

<embed></embed>

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

排队：

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

内联添加它们会很麻烦。

这通常是如何处理的？

感谢您的帮助！

标签： svg

解决方案

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

人们过去使用的一种解决方案是在运行时使用一些 Javascript 来内联 SVG 文件。

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

推荐阅读