SVG过滤器没有改变填充颜色答案

【问题标题】：SVG filter is not changing the fill colorSVG过滤器没有改变填充颜色
【发布时间】：2020-05-04 02:10:18
【问题描述】：

我有一个 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>

为什么它不起作用？

【问题讨论】：

标签： html css svg svg-filters

【解决方案1】：

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

当其他浏览器赶上时，您可以使用 SVG 过滤器。每个 CSS 过滤器都是 described in the W3C filters specification 所以亮度过滤器是这样的

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

【讨论】：