过滤器SVG适用于画布不适用于Chrome答案

【问题标题】：filtre SVG apply to a canvas dont work on Chrome过滤器SVG适用于画布不适用于Chrome
【发布时间】：2014-03-29 23:11:12
【问题描述】：

我有 chrome 版本：33.0.1750.117

在此版本之前，过滤器 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 */
        }

【问题讨论】：

确认您的结果：在 FF27 中悬停==灰度，在 Chrome33 中根本没有图像，在 IE11 中没有图像但没有灰度。
在 chrome 中，如果您删除 svg 标签，它将显示为图像，
在最新版本中，我可以在画布上使用过滤器 svg，但如果您转到 chrome://flags 并禁用 2D 画布，它将起作用
对我来说在 Windows 7 上的 Chrome 33.0.1750.117 m 上运行良好。（一旦你向下滚动到空的 SVG，就是。也许那是@markE 的问题？） IE11 上什么都没有，但那是因为 IE 还不支持 HTML 元素上的 SVG 过滤器。 ms-filter property is unrelated and deprecated.
刚刚尝试启用/禁用 2D 图形加速选项。它并没有阻止过滤器在我的系统上工作，但我认为某些图形加速系统可能会产生干扰。您使用的是什么操作系统/显卡？

标签： javascript css svg filter html5-canvas

【解决方案1】：

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

见grayscale in chrome via css。

【讨论】：

我需要使用过滤器SVG，因为我结合了RGB过滤器，我认为没有过滤器RGB和-webkit-filter可以手动修复红色或蓝色或绿色的程度

【解决方案2】：

它似乎在 Chrome 33 中工作，只是 SVG 元素妨碍了你。在 SVG 元素上尝试 width="0" height="0"。（尼特：你还缺少一个结束标签。）

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

【讨论】：