W3C 灰度 SVG 滤镜

Question

我想修改这里找到的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，它应该很容易理解。

- little tiny man

Answer 1

一个更简单的方法是只使用 feColorMatrix 的饱和度类型（虽然使用矩阵实现你想要的效果并不难，如果你懂算术，应该能够遵循该规范。）

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

- Michael Mullany

Answer 2

尝试将<feColorMatrix type="luminanceToAlpha" />作为属性。这将给您类似于灰度的效果。

- ramesh

---

这将亮度设置为透明度 - 结果通常是单色的，但与灰度的结果几乎完全不同。 - brichins