如何解决SVG 过滤器不适用于 Firefox 中的画布,无论是通过上下文还是通过样式
我想使用画布的上下文 https://wiki.mozilla.org/CanvasFilters#Using_a_SVG_reference 或将过滤器放入 CSS 样式来过滤 #include <bits/stdc++.h>
using namespace std;
的内容:
<canvas>
小提琴:https://jsfiddle.net/s1dw74u3/
在 Chrome 中,两种解决方案都有效,因此上面的代码应用了两次过滤器。在 Firefox 中,无:上下文过滤器被忽略,样式过滤器使画布完全消失。
如何以便携的方式应用这样的过滤器?
解决方法
就我所见,您的过滤器在 Chrome 中不起作用。不同之处在于,当过滤器不起作用时,Firefox 不会显示任何内容,而 Chrome 会显示未经过滤的图像。
如果您想同时修复 Firefox 和 Chrome,请停止使用 display: none with 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,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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。