feColorMatrix 滤镜的强度答案

【问题标题】：Strength of feColorMatrix filterfeColorMatrix 滤镜的强度
【发布时间】：2023-04-03 00:14:01
【问题描述】：

我正在尝试在 SVG 中创建一个可调节强度的棕褐色滤镜。在 Canvas 中，这很容易做到。但我不确定如何在 SVG 中解决这个问题。

这是我当前的过滤器代码。

 <filter id="image1362918248406filter">
    <feColorMatrix color-interpolation-filters="sRGB" values="0.393 0.769 0.189 0 0 0.349 0.686 0.168 0 0 0.272 0.534 0.131 0 0 0 0 0 1 0"></feColorMatrix>
 </filter>

下面的小提琴是我试图实现的目标的演示。如何让 SVG 示例看起来与画布示例相同？

http://jsfiddle.net/5LLFS/

【问题讨论】：

标签： canvas svg filter colormatrix

【解决方案1】：

当我在 Firefox 上尝试时，这看起来像你想要的。

<defs>
    <filter id="image1362918248406filter" color-interpolation-filters="sRGB">
        <feColorMatrix values="0.393 0.769 0.189 0 0 0.349 0.686 0.168 0 0 0.272 0.534 0.131 0 0 0 0 0 1 0" result="sepia"></feColorMatrix>
        <feComposite in="sepia" in2="SourceGraphic" operator="arithmetic" k2="0.5" k3="0.5" />
       </filter>
</defs>

【讨论】：

正是我想要的 :) 谢谢！