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

Question

我正在尝试创建一个滤镜，既可以将亮度降低到 30%，又可以将图像灰度化到 90%。在 webkit 上，这非常简单，但 Gecko 目前只支持通过使用filters: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

您可以将效果组合到单个过滤器中。

<svg>
    <defs>
        <filter id="both">
            <feComponentTransfer>
                <feFuncR type="linear" slope=".3"/>
                <feFuncG type="linear" slope=".3"/>
                <feFuncB type="linear" slope=".3"/>
            </feComponentTransfer>
            <feColorMatrix type="matrix" values="
                0.3333 0.3333 0.3333 0.0000 0.0000
                0.3333 0.3333 0.3333 0.0000 0.0000
                0.3333 0.3333 0.3333 0.0000 0.0000
                0.0000 0.0000 0.0000 1.0000 0.0000
            "/>
        </filter>
    </defs>
    <rect fill="#ff00ff" width="100" height="100" x="0"/>
    <rect fill="#ff00ff" width="100" height="100" x="120" filter="url(#both)"/>
</svg>