Élément <tspan> SVG

L'élément <tspan> de SVG est utilisé pour dessiner du texte en plusieurs lignes dans SVG. Il n'est pas nécessaire de positionner absolument chaque ligne de texte, l'élément <tspan> permet de placer une ligne de texte par rapport à la ligne précédente. L'élément <tspan> permet également à l'utilisateur de sélectionner et de copier-coller plusieurs lignes de texte à la fois, et non pas simplement un élément text.

Exemple de tspan

Ceci est un exemple simple de <tspan> :

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20"　y="15">
　　　　　　　　<tspan>tspan　ligne　1</tspan>
　　　　　　　　<tspan>tspan　ligne　2</tspan>
　　　　</text>
</svg>

Voici l'image de résultat :

Notez comment le résultat de <tspan> positionne les lignes de texte par rapport à l'une et l'autre (après l'une et l'autre).

Positionnement vertical

Si vous souhaitez positionner verticalement la ligne de texte, vous pouvez utiliser l'attribut dy (delta y) :

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20"　y="15">
　　　　　　　　<tspan>tspan　ligne　1</tspan>
　　　　　　　　<tspan dy="10">tspan　ligne　2</tspan>
　　　　</text>
</svg>

Maintenant, en raison du deuxième attribut dy de l'élément <tspan> défini comme  10" , donc la deuxième ligne de texte est affichée sous la première ligne de texte10pixels. Voici l'image de résultat :

Pour positionner l'élément <tspan> à une position y absolue, utilisez les attributs comme pour l'élément <text>.

Si plusieurs nombres sont écrits dans l'attribut dy, chaque nombre est appliqué à chaque caractère du texte de l'élément <tspan>. Voici un exemple :

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　　　　<text x="10" y="15">
　　　　　　　　　　　　<tspan dy="5　10　20">
　　　　　　　　　　　　　　　　123
　　　　　　　　　　　　</tspan>
　　　　　　　　</text>
　　　　</svg>

Voici l'image générée. Notez comment l'intervalle vertical entre les caractères change.

Positionnement horizontal

Pour positionner le texte relativement sur l'axe des x, vous pouvez utiliser l'attribut dx (delta x). L'exemple suivant montre la définition de dx30 effet. Notez que maintenant la deuxième ligne de texte est affichée par rapport à la fin de la première ligne de texte (et non au début)30 pixels :

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20"　y="15">
　　　　　　　　<tspan>tspan　ligne　1</tspan>
　　　　　　　　<tspan dx="30"　dy="10">tspan　ligne　2</tspan>
　　　　</text>
</svg>

Voici l'image de résultat :

Si plusieurs nombres sont spécifiés dans l'attribut dx, chaque nombre est appliqué à chaque lettre de l'élément <tspan>. Voici un exemple :

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20">
　　　　<tspan dx="5　10　20">123</tspan>
</text></svg>

Voici l'image de résultat :

Vous pouvez également définir l'attribut x pour fixer l'abscisse de l'axe des x du texte. Si vous souhaitez afficher une liste de toutes les lignes non ajustées sous forme de liste, cela sera très utile. Voici un exemple où x est réglé sur trois lignes10　Exemple :

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text y="20">
　　　　　　　　<tspan x="10">tspan　ligne　1</tspan>
　　　　　　　　<tspan x="10"　dy="15">tspan　ligne　2</tspan>
　　　　　　　　<tspan x="10"　dy="15">tspan　ligne　3</tspan>
　　　　</text>
</svg>

Voici l'image de résultat :

Élément tspan de style

Il est possible de définir le style d'un élément individuellement. Par conséquent, vous pouvez utiliser l'élément <tspan> pour définir le style d'un bloc de texte afin qu'il soit différent du reste du texte. Voici un exemple :

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20">
　　　　Voici un <tspan style="font-weight:　gras;">gras</tspan>　mot.
</text></svg>

Voici l'image de résultat :

Décalage de la ligne de base pour les indices supérieurs et inférieurs

Vous pouvez utiliser la ligne de base-L'attribut CSS shift utilise l'élément <tspan> pour créer des indices supérieurs et inférieurs. C'est une ligne de base SVG-Exemple de shift, qui montre comment :

<svg　width="500" height="100">　　　　
<text x="10" y="20">　　　　
Voici un texte avec <tspan style="baseline-shift: superscript">superscript</tspan>　　　　
et <tspan style="baseline-shift: souscript">souscript</tspan> mélangé avec normal　　　　
text.　　　　
</text>　　　　
</svg>

C'est l'image générée. (Note: Firefox peut ne pas prendre en charge)