How to apply CSS filter saturate to SVG elements? [duplicate]

Question

I have this svg composition:

<svg width="400" height="200">
  <circle id="circle-1" cx="50" cy="100" r="40"></circle>
  <circle id="circle-2" cx="150" cy="100" r="40"></circle>
</svg>

I would like to apply filter: saturate(0.2) to the second circle but the CSS filter property is not working.

Answer 1

In SVG elements we have to use SVG Color Matrix Transformations.

For the specific case we have to do:

<svg width="400" height="200">
  <filter id="saturate" filterUnits="objectBoundingBox">
     <feColorMatrix type="saturate" in="SourceGraphic" values="0.2"/>
  </filter>

  <circle id="circle-1" cx="50" cy="100" r="40" ></circle>
  <circle id="circle-2" cx="250" cy="100" r="40" filter="url(#saturate)"></circle>
</svg>

Working example: https://jsfiddle.net/fguillen/dx947a36/19/