javascript - 过滤 SVG 适用于 Canvas 不适用于 Chrome

Question

我有 chrome 版本:33.0.1750.117

在此版本之前，应用于我的 Canvas 的滤镜 SVG 可以工作，但现在它可以在 firefox 上工作，但不能在 chrome 上工作

你可以用这个例子来测试

example grayscale filter on canvas

<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 */
        }

Answer 1

你也可以使用-webkit-filter: grayscale(100%);

参见 grayscale in chrome via css .