边缘（IE11）使用SVG绘图的画布偏移

Question

我想在画布中绘制一个序列化的DOM元素。它完美的工作 Chrome，Firefox，Safari和Opera但我在Edge（和IE11（这不重要））上遇到了问题。

这是我处理画布绘图的方式：

  this._$svgElement = this._props._svgContainer.find('svg');
  this._initSVGWidth = this._$svgElement.width();
  this._initSVGHeight = this._$svgElement.height();

  var svgURL = new XMLSerializer().serializeToString(this._$svgElement[0]);
  var svgString = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgURL);

  var newImageWidth, newImageHeight;

  this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);

  this._img = new Image();
  this._img.onload = function () {


    if (bowser.msie) {

      newImageHeight = (this._initSVGHeight / this._initSVGWidth) * this._canvas.width;
      newImageWidth = this._canvas.width;

      if (newImageHeight >= this._canvas.height) {
        newImageHeight = this._canvas.height;
        newImageWidth = (this._initSVGWidth / this._initSVGHeight) * this._canvas.height;
      }
    } else {
      newImageHeight = this._img.height / this._img.width * this._canvas.width;
      newImageWidth = this._canvas.width;

      if (newImageHeight > this._canvas.height) {
        newImageHeight = this._canvas.height;
        newImageWidth = this._img.width / this._img.height * this._canvas.height;
      }
    }

    //original image values (never changed)
    this._imgData = {
      x: (this._canvas.width / 2 - newImageWidth / 2),
      y: (this._canvas.height / 2 - newImageHeight / 2),
      w: newImageWidth,
      h: newImageHeight
    };

    this._ctx.drawImage(this._img, this._imgData.x, this._imgData.y, newImageWidth, newImageHeight);

  }.bind(this);
  this._img.src = svgString;

结果是微软浏览器上的一个奇怪的偏移： 边缘浏览器（错误） 例如：Chrome浏览器（应该如何） 这是SVG测试源：https://s.cdpn.io/3/kiwi.svg

我不知道这里的问题是什么。因为即使我尝试用drawImage(this._img, 0, 0)绘制它，结果图像也会被切断。

我很感谢任何建议，因为我们没有任何想法。