javascript - 如何更新 SVG 文本并保持对齐？

Question

在我的应用程序中，我有一些预加载的 SVG，我克隆它们并用不同的值更新文本元素。原始 SVG 渲染正确，文本左对齐。更新后，新文本位置错误。

path.text = randomString.substr(0, randomInt) + randomString.substr(0,randomInt);

fiddle 示例:https://jsfiddle.net/1t4qkzpc/1/

如何在不弄乱文本的情况下更新这些 SVG？

问候， 亚历克斯

Answer 1

选取文本的左属性以保持该特定文本的位置。 鉴于文本默认左对齐，从左侧移除当前的半宽，并在使用新文本重新计算尺寸后，将半宽加回来。

这在这种情况下会有所帮助。我认为它不适用于旋转的文本

var svgEl = document.body.getElementsByTagName('svg')[0];
var serializer = new XMLSerializer();
var svgStr = serializer.serializeToString(svgEl);

var canvas = new fabric.Canvas('c');
canvas.backgroundColor = 'rgb(150,150,150)';
fabric.Object.prototype.objectCaching = false;

var path = fabric.loadSVGFromString(svgStr,function(objects, options) {
  var obj = fabric.util.groupSVGElements(objects, options);
  obj.scaleToHeight(200)
    .set({ left: 20, top: 20 })
    .setCoords();
  
  canvas.add(obj); 
});


var path = fabric.loadSVGFromString(svgStr,function(objects, options) {
  var obj = fabric.util.groupSVGElements(objects, options);
  obj.scaleToHeight(200)
    .set({ left: 20, top: 250 })
    .setCoords();
  
  obj.paths.forEach(function(path) {
  	var randomString = Math.random().toString(36).slice(2);
    var randomInt = Math.floor(Math.random()*(40+1-1)) + 1;
    path.text = randomString.substr(0, randomInt) + randomString.substr(0,randomInt);
   if (path.type === 'text') {
     path.left -= path.width / 2
     path._initDimensions()
     path.left += path.width / 2
   }
  })
  
  canvas.add(obj);  
});

/*var url = "https://www.w3.org/TR/SVG2/images/text/textdecoration01.svg";

fabric.loadSVGFromURL(url, function (objects, options) {
	var object = fabric.util.groupSVGElements(objects, options);
  
  object.set({left: 20, top: 20});
  
  canvas.add(object).renderAll();
  
});

fabric.loadSVGFromURL(url, function (objects, options) {
	var object = fabric.util.groupSVGElements(objects, options);
  
   object.paths.forEach(function (path) {
  	 path.text = "MUIE CU LAMAIE";
  });
  
  object.set({left: 20, top: 220});
  
  canvas.add(object).renderAll();
  
});
*/

svg{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js"></script>
<canvas id="c" width="800px" height="500px"></canvas>

<svg version="1.1" id="CE" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="200" height="100" viewBox="0 0 200 100" style="enable-background:new 0 0 200 100;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#20AEE6;}
	.st1{fill:#FFFFFF;}
	.st2{font-family: Roboto, Helvetica, Arial, sans-serif;}
	.st3{font-size:12px;}
	.st4{fill:#E2E2E2;}
	.st5{fill:#E3E7E8;}
</style>
<rect class="st0" width="200" height="100"/>
<text x="5" y="61" class="st1 st2 st3">LOOOOOOOOOOOOOOOOOONG</text>
<text x="5" y="76" class="st1 st2 st3">MEEEEDIUUUUUUM</text>
<text  x="5" y="91" class="st1 st2 st3">SHORT</text>
</svg>