我可以制作一个具有多种效果的SVG滤镜吗？

Question

我试图创建一个过滤器，将亮度降低到30％，并将图像灰度化为90％。在webkit上，这非常简单，但Gecko目前只支持使用过滤器调用过滤器：url（filter.svg） ），当我在同一个CSS元素上调用两个不同的元素时： filter: url(filters.svg#grayscale); filter: url(brightness.svg#brightness);

它似乎取消了第一个过滤器。

我有一个SVG文件，我使用灰度过滤器，我在StackOverflow上找到了一个地方，并在https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Combining_functions上找到了一个亮度过滤器。 我只需将亮度代码复制并粘贴到灰度中。 这里是

    <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>

<svg height="0" xmlns="http://www.w3.org/2000/svg">
 <filter id="brightness">
    <feComponentTransfer>
        <feFuncR type="linear" slope=".3"/>
        <feFuncG type="linear" slope=".3"/>
        <feFuncB type="linear" slope=".3"/>
    </feComponentTransfer>
  </filter>
</svg>

我可以看到使用上下文“调用”过滤器。 看到这一点，我想我应该能够在同一行中调用它们或者将代码合并到一个名为过滤器的过程中，既可以实现灰度又可以降低亮度。不幸的是，我不知道该怎么做。

我也不确定如何改变灰度滤镜代码使其灰度达到90％...目前它是100％。 在一个理想的世界里，我想复制亮度效果：30％; 和灰度：90％; 在webkit上完全进入这个SVG

Answer 1

将效果组合成一个过滤器。

 <filter id="both">
    <feComponentTransfer result="brightness">
        <feFuncR type="linear" slope=".3"/>
        <feFuncG type="linear" slope=".3"/>
        <feFuncB type="linear" slope=".3"/>
    </feComponentTransfer>
  <feColorMatrix type="matrix" in="brightness" 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"/>
  </filter>