Question

我开发了一个 CANVAS 区域，其中很少有HTML元素呈现为 SVG数据。它在 firefox 新的更新版本之前完美运行。现在，在最近的更新之后，仅渲染CSS背景图像。通过img标签的内嵌图像没有显示任何内容。

我不能使用css背景图片，因为有一些限制。我必须通过更高的z-index和position：absolute属性在背景中显示颜色并在上层显示一些PNG图像。所以，它会像透明区域中的彩色绘图一样。

已更新 - 示例代码 -



    <canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
    <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
         "<foreignObject width='100%' height='100%'>" +
           "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px;background-color:#0f0'>" +
             "<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" +
           "<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' width='150' height='150'/></div>" +
         "</foreignObject>" +
       "</svg>";
    var DOMURL = self.URL || self.webkitURL || self;
    var img = new Image();
    var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
    var url = DOMURL.createObjectURL(svg);
    img.onload = function() {
    ctx.drawImage(img, 0, 0, 200,200);
    DOMURL.revokeObjectURL(url);
};
img.src = url;
</script>

<canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" + "<foreignObject width='100%' height='100%'>" + "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px;background-color:#0f0'>" + "<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" + "<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' width='150' height='150'/></div>" + "</foreignObject>" + "</svg>"; var DOMURL = self.URL || self.webkitURL || self; var img = new Image(); var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"}); var url = DOMURL.createObjectURL(svg); img.onload = function() { ctx.drawImage(img, 0, 0, 200,200); DOMURL.revokeObjectURL(url); }; img.src = url; </script>

Answer 1

确认这是Firefox版本中的错误＆gt; = 55＆lt; 58.
https://bugzilla.mozilla.org/show_bug.cgi?id=1409992

现在已修复当前的Nightly版本58。

不幸的是没有已知的解决方法......

更新firefox 55后，内联图像（img）无法通过SVG在HTML CANVAS中呈现

1 个答案: