feColorMatrix 필터의 장점

Question

조정 가능한 강도로 SVG에서 세피아 필터를 만들려고합니다. 캔버스에서 이것은 쉽게 할 수 있습니다. 그러나 나는 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

이것은 내가 파이어 폭스에서 그것을 시도 할 때 당신이 원하는 것 같습니다.

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