feColorMatrix过滤器的强度

时间:2013-03-13 09:11:24

标签: canvas svg filter colormatrix

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

1 个答案:

答案 0 :(得分:2)

当我在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>