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

作为我的一个项目的一部分，我需要动态创建一个画布，然后在画布中绘制一个SVG文件（也是动态生成的）。对于我的项目，我需要画布覆盖整个页面，SVG填充整个画布。出于浏览器可比性的考虑，我将SVG的宽度和高度分别设置为画布的宽度和高度（根据这个答案来处理这个已知的Firefox bug），但是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

img.onload=函数（）{
ctx.比例（比率、比率）；
ctx.drawImage（img，0,0）；
}
svg=“数据：图像/svg+xml，”+“”+
“*{margin:0；padding:0；}p{背景色：蓝色；}”+
'' +
""
img.src=svg

问题的完整小提琴演示：

---

谢谢大家!

在FF中，您的演示对我来说效果很好。我看到一个黑色的长方形

在您的示例中，您是否意外地使用了一个有效的SVG

如果您的其他SVG无法工作，可能是因为人们在Firefox中使用SVG数据URI时遇到的一个常见问题：哈希/磅符号（#）

从技术上讲，“#”是URL中的保留字符。它标记一个片段标识符。它在SVG中显示为片段标识符（例如

url（#mygradient）

和颜色（

#ffcc88

）

如果DataURI中有“#”，Chrome和其他浏览器会更宽容，但Firefox没有。这不是Firefox中的错误。它运行正常

---

解决这个问题的方法是，通过使用百分比编码，像转义任何保留URL字符一样转义SVG中的任何“#”。对于“#”来说，编码是

%23

，因为你说我的演示对你有效，所以我再次检查了它。这是我发现的。该演示在Firefox 47.0中不起作用（这就是我测试演示和我的项目的地方）但演示在Firefox 46.0.1上运行得很好（我降级为测试）。你使用的是什么版本？谢谢你的建议#无论如何，在发布我的项目之前，我会大胆地编写一个数据：URI消毒剂。我刚刚更新了Firefox并重新启动了我的计算机，现在它对我来说可以工作了（包括演示和我的项目）。在推出FF 47.0之后，我得到了它，所以可能是我的版本不稳定，或者我的第一次更新不好，或者其他什么。对此，我很抱歉！@zevnicsca，无需自己编写，

encodeURIComponent（）

已在您的“窗口”对象中。此外，一些UAs需要编码头，因此唯一完整的跨浏览器dataURI头是

“数据：图像/svg+xml；字符集=utf8”，