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

Question

我正在尝试创建一个过滤器，既可以将亮度降低到 30%，也可以将图像灰度化到 90%。在 webkit 上，这简单得可笑，但 Gecko 目前仅支持通过使用 filters:url( filter.svg)，当我像这样在同一个 CSS 元素上调用两个不同的元素时:过滤器:url(filters.svg#grayscale);
过滤器: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%。在理想世界中，我想复制 brightness: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>