我可以制作一个具有多种效果的 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>