Question

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

这在webkit上非常简单，但我甚至只使用它，因为Gecko只支持通过过滤器调用过滤器：CSS中的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，这应该是有意义的

Answer 1

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

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

Answer 2

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

W3C灰度SVG滤波器

2 个答案: