filtre SVG apply to a canvas dont work on Chrome

Question

I have chrome version : 33.0.1750.117

before this version the filter SVG applied to my canvas work but now it work on firefox but not on chrome

you can test with this example

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale" color-interpolation-filters="sRGB">
  <feColorMatrix type="matrix"  
     values="0.3333 0.3333 0.3333 0 0.001 
             0.3333 0.3333 0.3333 0 0.001  
             0.3333 0.3333 0.3333 0 0.001  
             0 0 0 1 0.001"/>

</svg>
<canvas id="myCanvas" width="300" height="300"></canvas>

CSS:

#myCanvas:hover {
        filter: url(#grayscale); /* Firefox */      
        -ms-filter: url(#grayscale); /* IE */
        -webkit-filter: url(#grayscale); /* Webkit */
        }

Confirming your results: Hover==greyscale in FF27, no image at all in Chrome33 and image but no greyscale in IE11. — markE, Feb 26 '14 at 20:58
in chrome if you remove the svg tags it will be appear the image , — Arbia CHARFI, Feb 26 '14 at 21:00
in the latest version I can use the filter svg on canvas but if you go to chrome://flags and desable 2D canvas it will work — Arbia CHARFI, Feb 26 '14 at 21:04
Works fine on Chrome 33.0.1750.117 m on Windows 7 for me. (Once you scroll down past the empty SVG, that is. Maybe that was @markE's problem?) Nothing on IE11, but that's because IE doesn't yet support SVG filters on HTML elements. The [ms-filter property is unrelated and deprecated](http://msdn.microsoft.com/en-us/library/ie/ms530752(v=vs.85).aspx). — AmeliaBR, Feb 28 '14 at 01:12
Just tried enabling/disabling the 2D Graphics acceleration option. It didn't stop the filter from working on my system, but I suppose that certain graphics acceleration systems could be interfering. What OS / graphics card are you using? — AmeliaBR, Feb 28 '14 at 01:17

score 0 · Answer 1 · edited May 23 '17 at 12:03

0

You can also use -webkit-filter: grayscale(100%);

See grayscale in chrome via css.

edited May 23 '17 at 12:03

Community

1
1

answered Feb 28 '14 at 14:19

Erik Dahlström

59,452
12
120
139

I need to use filter SVG because I combine with RGB filter, and I dont think there 's a filter RGB with -webkit-filter to fix manually the degree of red or blue or green – Arbia CHARFI Feb 28 '14 at 19:09

score 0 · Answer 2 · answered Mar 04 '14 at 19:39

It seems to be working in Chrome 33, it's just that the SVG element is in your way. Try width="0" height="0" on the SVG element. (Nit: you're also missing a close tag.)

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
 <filter id="grayscale" color-interpolation-filters="sRGB">
  <feColorMatrix type="matrix"  values="0.3333 0.3333 0.3333 0 0.001 0.3333 0.3333    0.3333 0 0.001 0.3333 0.3333 0.3333 0 0.001 0 0 0 1 0.001"/>
 </filter>
</svg>
<canvas id="myCanvas" width="300" height="300"></canvas>

http://jsfiddle.net/k2nPW/

filtre SVG apply to a canvas dont work on Chrome

2 Answers2