SVG фильтр не меняет цвет заливки - PullRequest
Новая
       14

SVG фильтр не меняет цвет заливки

2 голосов
/ 17 января 2020

У меня есть изображение SVG, которое показывает немного lo go Я использую на веб-сайте. У этого 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>

Почему это не работает?

1 Ответ

3 голосов
/ 17 января 2020

Некоторые браузеры не поддерживают фильтры CSS для элементов SVG. Некоторые, такие как Firefox do.

В то время как другие браузеры догоняют, вы можете использовать SVG-фильтр. Каждый CSS фильтр описан в спецификации фильтров W3 C , поэтому фильтр яркости - это 

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