如何将饱和的CSS过滤器应用于SVG元素？

Question

我有这个svg组成：

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

我想将filter: saturate(0.2)应用于第二个圆圈，但是CSS过滤器属性无效。

Answer 1

在SVG元素中，我们必须使用SVG Color Matrix Transformations。

对于特定情况，我们必须做：

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

工作示例：https://jsfiddle.net/fguillen/dx947a36/19/