Comment mettre à jour le texte SVG et maintenir l'alignement?

Question

Dans mon application, j'ai des SVG qui sont préchargés et je les clone et met à jour les éléments de texte avec des valeurs différentes. Les SVG d'origine s'affichent correctement et le texte est aligné à gauche. Après la mise à jour, le nouveau texte est mal placé.

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

violon Exemple: https://jsfiddle.net/1t4qkzpc/1/

Comment pourrais-je mettre à jour ces SVGs sans déconner le texte?

Cordialement, Alex

Answer 1

La propriété gauche du texte est repris à mantenir la position à ce texte particulier. Étant donné que le texte est aligné par défaut à gauche, supprimez la demi-largeur actuelle à partir de la gauche et, après avoir recalculé les cotes avec le nouveau texte, ajoutez la demi-largeur.

Cela peut aider dans cette situation. Je ne pense pas que cela fonctionnera avec le texte pivotée

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>