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

【问题标题】：How do I have an SVG image inherit colors from the HTML document?如何让 SVG 图像从 HTML 文档继承颜色？
【发布时间】：2012-10-11 15:04:46
【问题描述】：

我有一堆 SVG 图像，我想将它们嵌入到 HTML 页面中，并使用 CSS 设置样式。

我希望 SVG 中的元素的颜色继承自父 HTML 元素的颜色属性。

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

【问题讨论】：

看一下SVG参数：schepers.cc/w3c/svg/params/ref.html
您的问题不清楚如何嵌入 svg 片段。听起来有点像stackoverflow.com/questions/4906148/…。无论如何，如果您的片段在 html 中是内联的，那么您的示例中的样式应该可以正常工作。

【解决方案1】：

HTML 使用颜色，而 SVG 使用填充和描边。您可以通过使用值currentColor 来获取填充或描边以使用颜色 CSS 属性的值，例如fill="currentColor"

【讨论】：

【解决方案2】：

您可以使用fill="currentColor"。

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

【讨论】：