fabricjs：使用导出和导入作为 svg 时的文本对齐问题

Question

一旦导出为 SVG 并导入到画布，在画布上添加的文本与原始对齐方式不同

http://jsbin.com/ruluko/edit?html,js,output

使用fabric js v1.6.0-rc.1

Answer 1

这看起来像是 fabric 的 svg 解析器中的一个错误。
如果不是将 svg 元素分组，而是将它们一一添加，您可以看到它：

var canvas1 = new fabric.Canvas('c1');
var circle = new fabric.Circle({
  radius: 50,
  fill: '#eef'
});
canvas1.add(circle);
var text = new fabric.Text('fabric', { fill: 'red', left: 100, top: 100 });
canvas1.add(text);
var topText = new fabric.Text('Top', { fill: 'red', left: 100, top: 0 });
canvas1.add(topText);
var botText = new fabric.Text('Bot LL', { fill: 'red', left: 80, top: 163 });
canvas1.add(botText);

var canvas2 = new fabric.Canvas('c2');

var doAction = function() {
  var mysvg = canvas1.toSVG();
  canvas2.clear();
  fabric.loadSVGFromString(mysvg, function(objects, options) {
    for (var i = 0; i < objects.length; i++) {
      canvas2.add(objects[i]);
    }
  });
};

.canvas-container{border:1px solid; display: inline-block; position: relative;}

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//cdn.bootcss.com/fabric.js/1.6.0-rc.1/fabric.min.js"></script>

  <canvas id="c1" width="200" height="200"></canvas>
  <canvas id="c2" width="200" height="200"></canvas>
  <button onclick='doAction()'>Export & Import as SVG</button>

正如您在代码段中看到的，每个元素的框都位于错误的坐标处。请注意，它也发生在loadSVGFromURL()方法中。

如果您无论如何要对这些元素进行分组，一个快速的解决方法是将您的 svg 绘制为图像：

var canvas1 = new fabric.Canvas('c1');

var circle = new fabric.Circle({
  radius: 50,
  fill: '#eef'
});
canvas1.add(circle);
var text = new fabric.Text('fabric', { fill: 'red', left: 100, top: 100 });
canvas1.add(text);
var topText = new fabric.Text('Top', { fill: 'red', left: 100, top: 0 });
canvas1.add(topText);
var botText = new fabric.Text('Bot LL', { fill: 'red', left: 80, top: 163 });
canvas1.add(botText);

var canvas2 = new fabric.Canvas('c2');


var doAction = function() {
  var mysvg = canvas1.toSVG();
  canvas2.clear();
  var svgURL = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(mysvg.split('svg11.dtd">')[1]);
  fabric.Image.fromURL(svgURL, function(oImg) {
    canvas2.add(oImg)
  });
};

.canvas-container{border:1px solid; display: inline-block; position: relative;}

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//cdn.bootcss.com/fabric.js/1.6.0-rc.1/fabric.min.js"></script>

<canvas id="c1" width="200" height="200"></canvas>
<canvas id="c2" width="200" height="200"></canvas>
<button onclick='doAction()'>Export & Import as SVG</button>

此解决方法的主要警告是，一旦加载，您将无法修改组的每个路径。

由于问题是由<tspan>元素引起的，更好的解决方法是首先清理 svg 字符串，将所有这些替换<tspan>为<text>元素：

var canvas1 = new fabric.Canvas('c1');

var circle = new fabric.Circle({
  radius: 50,
  fill: '#eef'
});
canvas1.add(circle);
var text = 'this is\na multiline\ntext';
var alignedRightText = new fabric.Text(text, {
  textAlign: 'right'
});
canvas1.add(alignedRightText)
var topText = new fabric.Text('Top', { fill: 'red', left: 100, top: 0 });
canvas1.add(topText);
var botText = new fabric.Text('Bot LL', { fill: 'red', left: 80, top: 163 });
canvas1.add(botText);

var canvas2 = new fabric.Canvas('c2');


var doAction = function() {
  var mysvg = canvas1.toSVG();
  canvas2.clear();
  fabric.loadSVGFromString(fixSVGText(mysvg), function(objects, options) {
    options.selectable = false;
    var obj = fabric.util.groupSVGElements(objects, options);
    canvas2.add(obj).renderAll();
  });
};

function fixSVGText(str) {
  // parse our string as a DOM object and get the SVGElement
  var svg = new DOMParser().parseFromString(str, "image/svg+xml").documentElement;

  // get all <tspan> elements
  var tspans = svg.querySelectorAll('tspan');
  for (var i = 0; i < tspans.length; i++) {
    var ts = tspans[i],
      parent = ts.parentNode,
      gParent = parent.parentNode;
    var j = 0;

    // create a new SVGTextElement to replace our tspan
    var replace = document.createElementNS('http://www.w3.org/2000/svg', 'text');

    var tsAttr = ts.attributes;
    // set the 'x', 'y' and 'fill' attributes to our new element
    for (j = 0; j < tsAttr.length; j++) {
      replace.setAttributeNS(null, tsAttr[j].name, tsAttr[j].value);
    }

    // append the contentText
    var childNodes = ts.childNodes;
    for (j = 0; j < childNodes.length; j++) {
      replace.appendChild(ts.childNodes[j]);
    }

    var tAttr = parent.attributes;
    // set the original text attributes to our new one
    for (j = 0; j < tAttr.length; j++) {
      replace.setAttributeNS(null, tAttr[j].name, tAttr[j].value);
    }
    // append our new text to the grand-parent
    gParent.appendChild(replace);

    // if this is the last tspan
    if (ts === parent.lastElementChild)
    // remove the old, now empty, SVGTextElement
      gParent.removeChild(parent)
  }
  // return a string version of our cleaned svg
  return new XMLSerializer().serializeToString(svg);
}

.canvas-container{border:1px solid; display: inline-block; position: relative;}

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//cdn.bootcss.com/fabric.js/1.6.0-rc.1/fabric.min.js"></script>

<canvas id="c1" width="200" height="200"></canvas>
<canvas id="c2" width="200" height="200"></canvas>
<button onclick='doAction()'>Export & Import as SVG</button>

但是最好的解决办法还是给kangax 开个新 issue，希望以后的版本能修复这个 bug。