如何更新SVG文本並保持對齊？

在我的應用程序中，我有一些預加載的SVG，我克隆它們並用不同的值更新文本元素。原始SVG呈現正確並且文本左對齊。更新後，新文本被錯誤放置。如何更新SVG文本並保持對齊？

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

例小提琴：https://jsfiddle.net/1t4qkzpc/1/

我怎麼能更新這些SVGs沒有搞亂的文本？

問候，亞歷

來源

2017-07-19 Alex Ionescu

文本的左邊屬性回升至十個分量位置，以特定的文本。由於默認情況下文本左對齊，因此從左側刪除當前半寬，並在用新文本重新計算尺寸後，向後添加半寬。

這可以幫助在這種情況下。我不認爲它會與文本旋轉工作

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) { 
 
    \t 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) { 
 
\t var object = fabric.util.groupSVGElements(objects, options); 
 
    
 
    object.set({left: 20, top: 20}); 
 
    
 
    canvas.add(object).renderAll(); 
 
    
 
}); 
 

 
fabric.loadSVGFromURL(url, function (objects, options) { 
 
\t var object = fabric.util.groupSVGElements(objects, options); 
 
    
 
    object.paths.forEach(function (path) { 
 
    \t 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" 
 
\t width="200" height="100" viewBox="0 0 200 100" style="enable-background:new 0 0 200 100;" xml:space="preserve"> 
 
<style type="text/css"> 
 
\t .st0{fill:#20AEE6;} 
 
\t .st1{fill:#FFFFFF;} 
 
\t .st2{font-family: Roboto, Helvetica, Arial, sans-serif;} 
 
\t .st3{font-size:12px;} 
 
\t .st4{fill:#E2E2E2;} 
 
\t .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>

來源

2017-07-19 12:16:46 AndreaBogazzi

如何更新SVG文本並保持對齊？

回答

相關問題