Question

作为我的项目的一部分，我需要动态创建一个画布，然后在画布中绘制一个SVG文件（也是动态生成的）。对于我的项目，我需要画布覆盖整个页面和SVG来填充整个画布。为了浏览器的可比性，我将SVG的宽度和高度分别设置为画布的宽度和高度（根据这个答案https://bugzilla.mozilla.org/show_bug.cgi?id=700533处理这个已知的Firefox错误https://stackoverflow.com/a/28692538）但是画布仍然是空白的Firefox（适用于Chrome，Safari和Opera）。我想知道是否有人可以解决这个问题。

我做了一个小提琴演示（不是我真正的SVG文件，但相同的方法和相同的问题）。只是为了证明问题不是SVG，如果你把它复制出警报并粘贴到一个新的Firefox选项卡，它就可以了。我的Firefox版本是47.0 这应该是代码中最重要的部分。

img.onload = function () {
  ctx.scale(ratio, ratio);
  ctx.drawImage(img, 0, 0);
}

svg = "data:image/svg+xml,"+ "<svg xmlns='http://www.w3.org/2000/svg' width='"+canvas.width+"px' height='"+canvas.height+"px' viewBox='0,0,"+canvas.width+","+canvas.height+"' >" +
        "<style type='text/css'> * { margin: 0; padding: 0; } p{background-color:blue;}</style>"+
                  '<rect x="10" y="10" width="100" height="100"/>' +
               "</svg>"
img.src = svg

问题的完整小提示演示：https://jsfiddle.net/9are9tzx/5/ 谢谢！

Answer 1

你的演示在FF中对我很好。我看到一个黑色矩形。

您是否在您的示例中意外使用了SVG？

如果您的其他SVG无法正常工作，可能是因为人们在使用Firefox中的SVG DataURI时遇到的常见问题：哈希/井号（＃）。

技术上＆＃39;＃＆＃39;是URL中的保留字符。它标记了片段标识符。它在SVG中显示为片段标识符（例如url(#mygradient)和颜色（#ffcc88）。

如果DataURI中有“＃”，那么Chrome和其他浏览器会更加宽容，但Firefox并不是这样。这不是Firefox中的错误。它的行为正确。

解决方案是通过使用百分比编码来逃避SVG中任何保留URL字符的任何方式。对于＆＃39;＃＆＃39;编码为%23。

无法在Firefox中将SVG绘制到HTMl5画布（即使设置了高度和宽度）

1 个答案: