Comment ajouter des caractères doubles "new line" en utilisant la méthode `text` dans Raphael.js ?

Question

Mon application dépend de la conversion de certains éléments de texte HTML en éléments SVG, à l'aide de Raphael.js .

Le texte de ces objets HTML est fourni par l'utilisateur, par l'intermédiaire d'une zone de texte. Par conséquent, il peut également saisir de nouvelles lignes. Et ces nouvelles lignes doivent être prises en compte lors de la création du SVG. Pour cela, j'utilise le code suivant :

function replaceNL(text) {      
    return text.replace(/[\n\r]/g, "\n");
}

Et lors de l'ajout du SVG à la page :

var obj = paper.text(x,y,replaceNL(this.text));

Le problème que j'ai rencontré est que les doubles (ou plus) retours à la ligne des chaînes de caractères (par exemple " \n\n ") ont l'effet d'une seule dans la .text() méthode. Comment puis-je y remédier ?

Answer 1

Cette question revient régulièrement... (http://stackoverflow.com/questions/12155954/nbsp-in-raphael-js)

Si vous modifiez votre élément de papier pour préserver les espaces, tous les éléments de texte qu'il contient se comporteront comme vous le souhaitez. Procédez comme suit :

paper.canvas.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space","preserve");

Voici une mise en garde : Raphael divise les chaînes de caractères passées à text sur les nouvelles lignes, et insère chaque segment dans son propre tspan. Lorsque le rendu SVG évalue les tspan, il séquence chacun d'entre eux en fonction de la boîte englobante de ses prédécesseurs. Étant donné qu'un tspan vide a une boîte englobante de 0x0, la nouvelle ligne - bien qu'émise - est fonctionnellement invisible.

La solution la plus simple serait d'émettre " \n \n " -- le caractère espace produit une boîte de délimitation, et provoque donc le rendu de la nouvelle ligne supplémentaire. Test de salubrité aquí .

Pour contrôler la hauteur des sauts de ligne entre les tspans, vous devez modifier leurs attributs dy. Raphael ne le permet pas d'emblée, mais il est facile d'écrire une fonction javascript pour définir ces attributs manuellement. Voici la méthode jquery, avec un élément textuel Raphael textElement et l'espacement souhaité, en pixels, comme suit spacing :

$(textElement.node).find( 'tspan' ).attr( 'dy', spacing );