W3C灰度SVG滤波器

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>