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

Posted 2023-02-23

【中文标题】如何让 SVG 图像从 HTML 文档继承颜色？

【英文标题】：How do I have an SVG image inherit colors from the HTML document?

【发布时间】：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 片段。听起来有点像***.com/questions/4906148/…。无论如何，如果您的片段在 html 中是内联的，那么您的示例中的样式应该可以正常工作。

【参考方案1】：

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

【讨论】：

这不适用于嵌入式 SVG，不是吗？

确实如此，但如果这就是您的意思，它不是跨文档。

【参考方案2】：

您可以使用fill="currentColor"。

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