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

我有一堆 SVG 图像，我想嵌入在 HTML 页面，这是 CSS 样式。

我希望 SVG 中的元素能够从父 HTML 元素的 color 属性继承它们的颜色。

我试过设置 style="stroke: none; fill: inherit"，但这个不起作用。

html
css
colors
svg

65040 次浏览

小开

HTML uses color whereas SVG uses fill and stroke. You can get fill or stroke to use the value of the color CSS property by using the value currentColor e.g. fill="currentColor"

小开

You can use fill="currentColor".

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

小开

stroke="currentColor" this worked for me

小开

Define the fill: of the whole SVG as currentColor in the CSS:

svg {
fill: currentColor;
}

This makes the whole SVG to inherit the normal CSS color: of the surrounding element. Just make sure that all SVG child elements don't have any fill defined.