SVG 过滤器不适用于 Firefox 中的 canvas，无论是通过上下文还是通过样式

Question

我想使用 canvas' 上下文 https://wiki.mozilla.org/CanvasFilters#Using_a_SVG_reference 或将过滤器放入 CSS 样式来过滤 <canvas> 的内容：

<!DOCTYPE html>
<html>
<body>
  <svg style="display:none;">
    <filter id="color-filter">
      <feColorMatrix type="matrix" values="0.5 0.5 0.5 0 0   0.3 0.3 0.3 0 0  0.3 0.3 0.3 0 0  0 0 0 1 0"/>
    </filter>
  </svg>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3; filter: url(#color-filter)">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
ctx.filter = "url(#color-filter)";
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"yellow");
grd.addColorStop(1,"cyan");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

</body>
</html>

Fiddle: https://jsfiddle.net/s1dw74u3/

在 Chrome 中，两种解决方案都有效，因此上面的代码应用了两次过滤器。在 Firefox 中，none：上下文过滤器被忽略，样式过滤器使 canvas 完全消失。

如何以便携的方式应用这样的过滤器？

Answer 1

据我所知，您的过滤器在 Chrome 中不起作用。不同之处在于，当过滤器不起作用时，Firefox 不显示任何内容，而 Chrome 显示未过滤的图像。

如果您想同时修复 Firefox 和 Chrome，请停止使用显示：none 和 SVG。如果您需要隐藏某些内容，请使用 width="0" 和 height="0"

<!DOCTYPE html>
<html>
<body>
  <svg width="0" height="0">
    <filter id="color-filter">
      <feColorMatrix type="matrix" values="0.5 0.5 0.5 0 0   0.3 0.3 0.3 0 0  0.3 0.3 0.3 0 0  0 0 0 1 0"/>
    </filter>
  </svg>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3; filter: url(#color-filter)">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
ctx.filter = "url(#color-filter)";
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"yellow");
grd.addColorStop(1,"cyan");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

</body>
</html>

SVG 过滤器不适用于 Firefox 中的 canvas，无论是通过上下文还是通过样式

SVG filter does not work with canvas in Firefox, neither via context nor via style

firefox

svg

html5-canvas

svg-filters