关于CSS：SVG URL的currentColor继承


currentColor inheritance for SVG url

与如何使SVG图像继承HTML文档中的颜色相同的问题，但特别是应用于应用于:before伪元素上的内容的svg图像时。

(所需的行为是两个复选标记都从主体继承了红色。当前只有嵌入式SVG会这样做。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type='text/css'>
    body {
        color: red;
    }

    .checkmark {
        height: 2em;
        width: 2em;
    }

    .checkmark:before {
        content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-0.5 0 20 15'><rect fill='currentColor' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='currentColor' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>");
    }
</style>

<!-- Renders red -->
<svg xmlns='http://www.w3.org/2000/svg' width='2em' height='2em' viewBox='-0.5 0 20 15'><rect fill='currentColor' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='currentColor' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>

<!-- Renders #000 -->

jsFiddle演示

content: url(...)使url部分成为图像，换句话说svg成为其自己的独立文档。样式不适用于所有文档，因此在这种情况下，不可能获得color来影响svg。

当svg内联时，它是文档的OTOH一部分，因此可以对其应用样式。

您可以制作(或动态生成)复选标记svg的多个版本，并调整样式规则，以便选择适当的"预着色"样式。

相关讨论

对于某些图标都具有相同颜色的用例，您可以在元素上使用css filter而不用更改其颜色，从而摆脱困境。

例如。请勿在SVG网址中使用currentColor，而应使用底色，例如red
然后，不要更改containing元素上的color(出于说明目的，您的containing元素为，但我在这里考虑的是)，而是向元素添加过滤器：

1
2
3
4
5
6
7
8
9
10
11
.checkmark {
    color: red;  /* matches fill in the SVG */
}

.checkmark::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-0.5 0 20 15'><rect fill='red' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='red' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>");
}

.checkmark::before:hover {
    filter: hue-rotate(120deg);  /* changes both text and tick from red to green */
}

您必须使用滤镜才能获得正确的颜色转换，例如您还可以更改亮度或将其设为灰度：

filter