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

Question

In my application I have some SVGs that are preloaded and I clone them and update the text elements with different values. The original SVGs render correctly and the text is left aligned. After the update the new text is wrongly placed.

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

Example fiddle: https://jsfiddle.net/1t4qkzpc/1/

How could I update these SVGs without messing up the text?

Regards, Alex

Answer 1

The left property of text is picked up to mantain position to that particular text. Given the fact that text is by default left aligned, remove the current half width from the left, and after recalculating the dimensions with the new text, add half width back.

This can help in this situation. I do not think it will work with rotated text

 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>