如何让SVG图像继承HTML文档中的颜色？

Question

我有一堆SVG图像,我想嵌入一个HTML页面,用CSS设置样式.

我希望能够让SVG中的元素的颜色继承自父HTML元素的颜色属性.

我尝试过设置,style="stroke: none; fill: inherit"但这不起作用.

Answer 1

html使用颜色,而SVG使用填充和描边.您可以使用值currentColor来填充或描边以使用颜色CSS属性的值,例如fill ="currentColor"

Answer 2

定义fill:整个 SVG 的currentColorCSS：

svg {
  fill: currentColor;
}

这使得整个 SVG 继承color:周围元素的普通 CSS。只需确保所有 SVG 子元素都没有任何fill定义即可。

Answer 3

您可以使用fill="currentColor"。

<a href="#" style="color:red">
<svg fill="currentColor"> ...</svg>
</a>

Answer 4

中风=“currentColor”这对我有用