canvas - feColorMatrix 滤镜的强度

Question

我正在尝试在 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/

Answer 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>