如何将饱和的 CSS 过滤器应用于 SVG 元素？ [复制]答案

【问题标题】：How to apply CSS filter saturate to SVG elements? [duplicate]如何将饱和的 CSS 过滤器应用于 SVG 元素？ [复制]
【发布时间】：2019-02-14 15:17:13
【问题描述】：

我有这个 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 过滤器属性不起作用。

【问题讨论】：

标签： css svg filter

【解决方案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/

【讨论】：

您应该可以直接从 CSS 中进行尝试，例如在 FF 中尝试 this fiddle。只是webkit和blink不支持（而they support having it set to the whole svg node...）
我刚刚了解到您应该将color-interpolation-filters="sRGB"（默认为linearRGB）添加到根<svg> 以获得与CSS desaturate() 相同的结果。