Question

我有一个svg图像，上面显示了我在网站上使用的一个小徽标。该svg有3条路径，在其中2条中，我想将填充颜色更改为较暗的颜色。

: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>

为什么不起作用？

SVG滤镜未更改填充颜色

0 个答案: