SVG 滤镜未更改填充颜色

Question

我有一个svg图像，它显示了我在网站上使用的小徽标。 这个 svg 有三条路径，在其中两条中，我想将填充颜色更改为更深一点的颜色。

:root {
--websiteColor: red;
}
.logoColor {
fill: var(--websiteColor);
}
.logoColor:nth-of-type(2), .logoColor:nth-of-type(3) {
fill: var(--websiteColor);
filter: brightness(20%);
}

<svg id="navLogo" xmlns="http://www.w3.org/2000/svg" version="1.0" width="200.000000pt" height="200.000000pt" viewBox="0 0 200.000000 200.000000">
<g stroke="none" transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)">
<path class="logoColor" d="M989 1166 c-183 -164 -319 -294 -323 -308 -10 -38 -7 -300 3 -296 6 2 151 130 324 285 l314 283 6 112 c9 149 9 208 -1 208 -4 0 -150 -128 -323 -284z"/>
<path class="logoColor" d="M1386 1162 l-318 -287 0 -159 c0 -154 0 -158 19 -145 11 8 157 138 325 289 l305 275 1 158 c0 86 -3 157 -7 156 -5 0 -151 -129 -325 -287z"/>
<path class="logoColor" d="M572 1153 l-321 -288 0 -158 c-1 -89 3 -157 8 -155 5 2 151 131 325 287 l316 285 0 135 c0 75 3 146 6 159 4 12 2 22 -3 22 -5 0 -154 -129 -331 -287z"/>
</g>
</svg>

为什么它不起作用？

Answer 1

某些浏览器不支持 SVG 元素上的 CSS 过滤器。有些，比如Firefox。

当其他浏览器赶上时，您可以使用SVG过滤器。每个 CSS 滤镜在 W3C 滤镜规范中都有描述，所以亮度滤镜是这样的

<filter id="brightness">
<feComponentTransfer>
<feFuncR type="linear" slope="[amount]"/>
<feFuncG type="linear" slope="[amount]"/>
<feFuncB type="linear" slope="[amount]"/>
</feComponentTransfer>
</filter>