如何让 SVG 图像从 HTML 文档继承颜色? [英] How do I have an SVG image inherit colors from the HTML document?

问题描述

我想将一堆 SVG 图像嵌入到 HTML 页面中，该页面使用 CSS 进行样式设置.

I have a bunch of SVG images that I want to embed in an HTML page, which is styled with CSS.

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

I want to be able to have elements in the SVG have their color inherited from the parent HTML element's color attribute.

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

I tried setting style="stroke: none; fill: inherit" but this doesn't work.

推荐答案

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

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"

这篇关于如何让 SVG 图像从 HTML 文档继承颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！