javascript - svg 绘制到画布定位和缩放错误

Question

我正在画布上绘制一个简单的 svg。在 Firefox 上，svg 的 x 位置和宽度不正确 - 向右推得太远且不够宽。

这是svg：

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300" viewBox="0 0 500 300">
<rect x="0" y="0" width="500" height="300" fill="#f00"/>
</svg>

这是简单的javascript：

var i = new Image();
i.addEventListener("load", () => {
  var c = document.getElementById("c");
  c.style.border = "1px blue solid";
  var ctx = c.getContext("2d");
  ctx.drawImage(i, 20, 20, 460, 260);
});
i.src = "test.svg";

这是 chrome 如何在画布上渲染 svg - 请注意 20px 的缩进看起来是正确的。

但是将其与它在 Firefox 上的呈现方式进行对比。注意它的左缩进大于 20px 并且宽度被缩放得太小。

你可以在这里演示这个问题： https ://codesandbox.io/s/scaled-svg-in-canvas-5fv11

这个问题有解决方法吗？难道我做错了什么？

标签： javascriptgoogle-chromesvgfirefoxcanvas