Comment afficher plusieurs lignes de texte en SVG?

est-il possible D'afficher plusieurs lignes de texte dans SVG sans utiliser le dy propriété? J'utilise SVG 1.1 mais je pourrais 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 le texte tout rouge à gauche et chacun tspan pour être une nouvelle ligne. tspan la seule étiquette 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 lire, chaque ligne doit apparaître en dessous de l'autre. Ils le sont mais ils sont aussi décalés à travers. 

<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 le x propriété. Si vous êtes à la définition de la dy propriété à valeur fixe, que se passe-t-il lorsque vous changez la taille de la police?

C'est mieux que ce que j'ai commencé avec: 

<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>

Est-il possible d'appliquer le x et dy tous les tspan s? Peut-être une propriété de la forme line-height sur le text élément?

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 le x l'attribut de tous les tspan S. Il ressemble à la dy la propriété peut accepter d'autres types de valeurs comme les points et les pourcentages!? Est-il un moyen de mettre le dy à une valeur égale à 120% de la taille de police de son élément de texte parent? J'ai essayé de le mettre à 120%, mais il n'a pas semblent fonctionner comme je l'attends. Quand je mets 120% dans le dy propriété, il sort de l'écran. Quand je l'ai mis à 12 ou 12px il reste dans la même position. Si je l'ai mis 12%, il change légèrement mais n'est pas de 120% ou 12px.

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

on dirait qu'il peut accepter n'importe lequel des suivants:

http://www.w3.org/TR/SVG/types.html#InterfaceSVGLength

j'ai aussi recherche de types de valeurs acceptables pour dy et dx, et je ne peux pas donner un sens http://www.w3.org/TR/SVG/text.html#TSpanElementDXAttribute.

UPDATE 4:

Merci pour les réponses jusqu'à présent. Il semble qu'il y est un moyen d'afficher plusieurs lignes de texte relativement espacés. Voir ma réponse ci-dessous.

19
demandé sur Michael 2015-07-17 08:49:11

3 réponses

il semble que cela va espacer les lignes l'une après l'autre sans codage dur une taille de police dans chaque tspan. Police à 15px: 

<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 changez la taille de la police, les lignes continuent d'être espacées à 120% à l'écart l'un de l'autre ou 1.2em. Police à 20px:

<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

19
répondu 1.21 gigawatts 2018-09-23 20:19:40

tspan est la bonne façon de le faire. Et c'est de cette façon:

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

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

3
répondu Reptar 2015-07-17 06:31:12

calculez juste 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
répondu Shimon Doodkin 2017-10-27 12:53:49