title: SVG filter is not changing the fill color
body: <p>I have a svg image which shows a little logo I`m using on a website.
  This svg has three paths and in two of them i want to change the fill color to a little darker one.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
    --websiteColor: red;
  }
  
  .logoColor {
      fill: var(--websiteColor);
  }
  
  .logoColor:nth-of-type(2), .logoColor:nth-of-type(3) {
      fill: var(--websiteColor);
      filter: brightness(20%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;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"&gt;
      &lt;g stroke="none" transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"&gt;
          &lt;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"/&gt;
          &lt;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"/&gt;
          &lt;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"/&gt;
      &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why isn't it working?</p>