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>

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

1 个答案: