SVG: à l'aide de getComputedTextLength d'habillage de texte

Je suis en train de placer du texte par la construction d'une chaîne de texte, et de l'utilisation de 'getComputedTextLength' pour savoir quand le texte va au-delà de la largeur autorisée. Cependant, je ne peux pas trouver un moyen simple de construire progressivement le texte qui va travailler avec getComputedTextLength.
L'idée générale est:

  str = svgDocument.createTextNode(myText[word]); //first word on new line
  word++;
  obj = text.cloneNode(true);                     //new text element for this line
  obj.appendChild(str);
  svgDocument.documentElement.appendChild(obj);   //reqd for getComputedTextLength?
  for( ; word < myText.length; word++) {
     next_width = obj.getComputedTextLength();    //get current line width
     if(next_width >= extent)
        break;
     str += " ";                                  //add next word to the line
     str += myText[word];
     ...
  }

Quelqu'un peut me dire comment faire pour obtenir que cela fonctionne? Sans doute 'str' est copié plutôt que référencé dans 'obj', mais j'ai aussi essayé de mettre 'obj.removeChild(str) " et " obj.appendChild(str) dans la boucle, mais la appendChild se bloque. J'ai aussi essayé différentes combinaisons de mouvement autour de la documentElement.appendChild, et la suppression de l'obj et de ré-ajouter, et ainsi de suite.

Merci
Al

OriginalL'auteur EML | 2011-08-12

  1. 20

    Cela devrait fonctionner: 

        var svgNS = "http://www.w3.org/2000/svg";
var width = 200;
function init(evt)
{
if ( window.svgDocument == null ) {
svgDocument = evt.target.ownerDocument;
}
create_multiline("Whatever text you want here.");
}
function create_multiline(text) {
var words = text.split(' ');                        
var text_element = svgDocument.getElementById('multiline-text');
var tspan_element = document.createElementNS(svgNS, "tspan");   //Create first tspan element
var text_node = svgDocument.createTextNode(words[0]);           //Create text in tspan element
tspan_element.appendChild(text_node);                           //Add tspan element to DOM
text_element.appendChild(tspan_element);                        //Add text to tspan element
for(var i=1; i<words.length; i++)
{
var len = tspan_element.firstChild.data.length;             //Find number of letters in string
tspan_element.firstChild.data += " " + words[i];            //Add next word
if (tspan_element.getComputedTextLength() > width)
{
tspan_element.firstChild.data = tspan_element.firstChild.data.slice(0, len);    //Remove added word
var tspan_element = document.createElementNS(svgNS, "tspan");       //Create new tspan element
tspan_element.setAttributeNS(null, "x", 10);
tspan_element.setAttributeNS(null, "dy", 18);
text_node = svgDocument.createTextNode(words[i]);
tspan_element.appendChild(text_node);
text_element.appendChild(tspan_element);
}
}
}
]]>
</script>
<text x="10" y="50" id="multiline-text"> </text>

    Il fonctionne par ajout de tspan éléments de l'élément de texte, puis d'ajouter du texte à chacun d'eux.

    Le résultat est quelque chose comme:

    <text>
<tspan>Whatever text</tspan>
<tspan>you want here.</tspan>
</text>

    Pour getComputerTextLength de travail, vous avez besoin pour créer le tspan (ou texte) de l'élément premier et assurez-vous qu'il est dans les DOM. Notez également que, pour ajouter du texte à une tspan élément, vous devez utiliser createTextNode() et ajouter le résultat.

    Salut Pierre, merci pour le code. Je regardais mon code d'origine aujourd'hui et a trouvé que mon problème de base était de l'incompréhension comment cultiver le texte d'un nœud. J'ai emballage simple de travailler avec appendChild, mais votre tspan choses semble bon - je vais vérifier. Merci Al
    Cool - le tspans sont utiles car il signifie que vous pouvez sélectionner plusieurs lignes de texte à la fois.
    Toujours utile, 7 ans plus tard, qui, je suppose, est à la fois bon et mauvais!

    OriginalL'auteur Peter Collingridge

  2. 0

    une fonction wrapper pour le débordement de texte:

        function wrap() {
var self = d3.select(this),
textLength = self.node().getComputedTextLength(),
text = self.text();
while (textLength > (width - 2 * padding) && text.length > 0) {
text = text.slice(0, -1);
self.text(text + '...');
textLength = self.node().getComputedTextLength();
}
}

    utilisation:

    text.append('tspan').text(function(d) { return d.name; }).each(wrap);
    Qu'est-OP?
    Affiche Originale. Ce n'D3? 🙂
    D3 est la Bibliothèque JavaScript utilisé pour manipuler le format SVG. @RobertLongson, OP n'est pas le seul qui lit ceci. Il y a d'autres personnes qui ont besoin de solution pour cela et même plus, certaines utilisations D3 comme dans mon cas. Cheers!
    Plaine JS/DOM questions sont TOUJOURS répondu avec jQuery extraits, mais la première question que j'ai répondu à voir avec d3.js il est reproché. La réponse de user2846569 est utile, parce que 1) d3 utilisateurs intéressés par le sujet peut trouver sa réponse utile si ils débarquent sur cette première réponse, 2) les principales d3.js peut être appelé le "jQuery de SVG sur les stéroïdes' - il y a un grand chevauchement entre d3 utilisateurs et à ceux qui ont besoin de textes tronqués en SVG; 3) La coopérative ou d'un lecteur pourrait apprendre que ce qui est une assez longue, impératif, d'enchevêtrement de code dans le cas des OP question peut être alternativement fait avec le plus déclaratif d3 de la bibliothèque.
    Semble que cela nécessite que le SVG être visible: Par exemple, si elle est enveloppée par quelque chose avec display:none;, puis getComputedTextLength() sera de retour 0. C'est mon navigateur comportement. Quelqu'un peut confirmer?

    OriginalL'auteur user2846569