W3C 灰度 SVG 过滤器答案

【问题标题】：W3C Grayscale SVG FiltersW3C 灰度 SVG 过滤器
【发布时间】：2014-06-08 22:22:53
【问题描述】：

我正在尝试更改此处找到的 W3C 灰度过滤器：http://www.w3.org/TR/filter-effects-1/#grayscaleEquivalent

这在 webkit 上非常简单，但我什至只使用它，因为 Gecko 仅支持在 CSS 中通过 filters:url(filter.svg) 调用过滤器。我没有太多使用 SVG 的经验，而且有几次我把它们弄乱了，它们的百分比值非常清晰，但灰度值稍微复杂一些。

这是 SVG 文件中的代码。

 <svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</svg>

具体来说，我希望将其灰度化为90%，以便只有10% 的颜色可见，但我不知道这个过滤器是如何工作的。我在这里http://www.w3.org/TR/filter-effects-1/#grayscaleEquivalent 找到了这份文件，这应该是有意义的

【问题讨论】：

标签： html css svg svg-filters

【解决方案1】：

尝试将<feColorMatrix type="luminanceToAlpha" /> 作为属性。这会给你类似于灰度的东西

【讨论】：

这会将亮度设置为透明度 - 结果通常是单色的，但与灰度几乎不一样。

【解决方案2】：

一个更简单的方法是只为 feColorMatrix 使用饱和类型（尽管用矩阵做你想要的数学并不难 - 如果你可以做算术，你应该能够遵循该规范。）

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="grayscale">
    <feColorMatrix type="saturate" values="0.10"/>
  </filter>
</svg>

【讨论】：