如何将CSS滤镜Saturate应用于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滤镜属性无法生效。

- fguillen

Answer 1

在SVG元素中，我们必须使用SVG颜色矩阵变换。

对于特定情况，我们需要执行以下操作：

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

- fguillen

---

你应该可以直接从CSS中完成它。例如，在FF中尝试这个fiddle。只是Webkit和Blink不支持它（而它们支持将其设置为整个SVG节点…）。 - Kaiido

我刚学到，为了得到与CSS desaturate()相同的结果，应该在根<svg>中添加color-interpolation-filters="sRGB"（默认为linearRGB）。 - cdoublev