Край (IE11) Холст смещен с рисунком SVG - PullRequest
Новая
       35

Край (IE11) Холст смещен с рисунком SVG

0 голосов
/ 14 мая 2018

Я хочу нарисовать сериализованный элемент 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;

В браузерах Microsoft наблюдается странное смещение: Браузер Edge (неправильный) Microsoft Edge Например: Chrome Browser (как и должно быть) Chrome Browser Это источник тестирования SVG: https://s.cdpn.io/3/kiwi.svg

Не знаюне знаю, в чем проблема здесь.Потому что даже если я попытаюсь нарисовать его с помощью drawImage(this._img, 0, 0), полученное изображение обрезается.

Я благодарен за любые предложения, потому что у нас нет идей.

...