web-dev-qa-db-fra.com

Comment afficher plusieurs lignes de texte en SVG?

Est-il possible d'afficher plusieurs lignes de texte en SVG sans utiliser la propriété dy? J'utilise SVG 1.1 mais je pourrais peut-être utiliser 1.2.

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <text x="0" y="15" font-size="15">
    <tspan>tspan line 1</tspan>
    <tspan>tspan line 2</tspan>
    <tspan>tspan line 3</tspan>
  </text>
</svg>

J'ai tapé le code ci-dessus. Je veux que le texte soit aligné à gauche et que chaque tspan soit une nouvelle ligne. tspan est la seule balise que je peux utiliser? Je veux que SVG positionne les lignes de texte verticalement avec des sauts de ligne. Je ne veux pas entrer manuellement le dy.

Selon ce que j'ai lu, chaque ligne devrait apparaître en dessous de l'autre. Ils le sont, mais ils sont également décalés.

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <text x="0" y="0" font-size="15">
    <tspan dy="15">tspan line 1</tspan>
    <tspan dy="15">tspan line 2</tspan>
    <tspan dy="15">tspan line 3</tspan>
  </text>
</svg>

Je suppose qu'il est nécessaire d'ajouter la propriété x. Si vous définissez la propriété dy sur une valeur fixe, que se passe-t-il lorsque vous modifiez la taille de la police?

Cela fonctionne mieux que ce avec quoi j'ai commencé:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xml:space="preserve">
  <text x="0" y="0" font-size="15" font-family="courier new" dy="0">
    <tspan x="0" dy="15">tspan line 1</tspan>
    <tspan x="0" dy="15">tspan line 2</tspan>
    <tspan x="0" dy="15">tspan line 3</tspan>
  </text>
</svg>

Existe-t-il un moyen d'appliquer les x et dy à tous les tspans? Peut-être une propriété comme line-height sur l'élément text?

Il ne semble pas que la balise de texte ait une propriété pour définir le delta y. Il a été suggéré dans les commentaires d'utiliser JQuery pour définir l'attribut x de tous les tspans. Il semble que la propriété dy puisse accepter d'autres types de valeurs telles que des points et des pourcentages!? Existe-t-il un moyen de définir dy sur une valeur correspondant à 120% de la taille de police de son élément de texte parent? J'ai essayé de le régler à 120%, mais cela ne semble pas fonctionner comme je m'y attendais. Lorsque j'ai défini 120% dans la propriété dy, cela disparaît de l'écran. Lorsque je l'ai défini sur 12 ou 12px il reste dans la même position. Si je le mets à 12%, il décale légèrement mais n'est pas à 120% ou 12px.

http://codepen.io/anon/pen/PqBRmd

Il semble qu'il puisse accepter l'un des éléments suivants:
http://www.w3.org/TR/SVG/types.html#InterfaceSVGLength

J'ai également recherché des types de valeurs acceptables pour dy et dx, et je ne peux pas le comprendre http://www.w3.org/TR/SVG /text.html#TSpanElementDXAttribute.

MISE À JOUR 4:
Merci pour les réponses fournies jusqu'ici. Il semble qu'il existe un moyen d'afficher plusieurs lignes de texte espacées relativement. Voir ma réponse ci-dessous.

htmlsvg
25
1.21 gigawatts

Il semble que cela espacera les lignes les unes après les autres sans coder en dur une taille de police dans chaque tspan. Police à 15 pixels:

<svg style="border:1px solid black" >
    <text x="0" y="0" font-size="15" dy="0">
        <tspan x="0" dy=".6em">tspan line 1</tspan>
        <tspan x="0" dy="1.2em">tspan line 2</tspan>
        <tspan x="0" dy="1.2em">tspan line 3</tspan>
    </text>
</svg>

Si vous modifiez la taille de la police, les lignes continuent d'être espacées de 120% séparés les uns des autres ou 1.2em. Police à 20 pixels:

<svg style="border:1px solid black" >
    <text x="0" y="0" font-size="20" dy="0">
        <tspan x="0" dy=".6em">tspan line 1</tspan>
        <tspan x="0" dy="1.2em">tspan line 2</tspan>
        <tspan x="0" dy="1.2em">tspan line 3</tspan>
    </text>
</svg>

Exemple - http://codepen.io/anon/pen/oXMVqo

28
1.21 gigawatts

tspan est la bonne façon de le faire. Et voici comment:

<tspan x="10" dy="15">tspan line 1</tspan>

référence: http://tutorials.jenkov.com/svg/tspan-element.html

3
Reptar

il suffit de calculer les hauteurs:

var drawx=part.x||0;
var drawy=part.y||0;
var fontSize=part.fontSize||14; 
var lineHeight=part.lineHeight||1.25; 
var style=part.style||""; 
var fontFamily=part.fontFamily||"Arial"; 
var text=part.text.split('\n').map(function(a,i){ return '<tspan x="'+drawx+'" y="'+(drawy+fontSize*lineHeight+i*fontSize*lineHeight)+'">'+a+'</tspan>' }).join('\n');

tqrSvg+='<text x="'+drawx+'" y="'+drawy+'" style="'+style+'" font-family="'+fontFamily+'" font-size="'+fontSize+'">'+text+'</text>'
2
Shimon Doodkin

Au cas où cela serait utile à quelqu'un:

Si l'on génère le SVG à partir d'Illustrator, il est possible de dessiner plusieurs lignes parallèles et d'utiliser l'outil Texte sur un chemin pour créer un paragraphe continu.

0
Andrew Swift