Texte <text> SVG

Élément SVG

Pour dessiner du texte, utilisez l'élément <text>.

　　　　　　<h1>Texte SVG</h1>
　　　　　　<svg largeur="550" hauteur="150">
　　　　　　　　　<g>
　　　　　　　　　　　　<text x="40" y="23" >Texte: </text>
　　　　　　　　　　　　<text x="40" y="40" remplissage="rgb(121,0,121)">fr.oldtoolbag.com tutoriel de base </text>
　　　　　　　　　</g>　
　　　　　　</svg>

Effet après exécution :

Texte SVG

Explication de l'utilisation

x : il définit la position supérieure gauche du texte.

y : il définit la position supérieure du texte.

width : définit la largeur.

height : définit la hauteur.

fill : l'attribut fill est utilisé pour définir la couleur de remplissage.

Texte tourné

Il est utilisé pour créer un texte tourné.

<svg hauteur="100" largeur="200">
　　<text x="0" y="15" remplissage="rouge" transformation="tourner(30　20,40)">fr.oldtoolbag.com</text>
</svg>

Effet après exécution :

Explication de l'utilisation

x : il définit la position en haut à gauche.

y : il définit la position du haut.

width : définit la largeur.

height : définit la hauteur.

fill : l'attribut fill est utilisé pour définir la couleur de remplissage.

Texte en ligne multiple

Il est utilisé pour créer un texte en ligne multiple. Utilisez l'élément <tspan> pour placer l'élément <text> dans un nombre quelconque de sous-groupes.

<svg largeur="570" hauteur="100">
　　<g>
　　<text x="40" y="23"Texte en ligne multiple: </text>
　　<text x="40" y="40" remplissage="rgb(121,0,121)">fr.oldtoolbag.com
　　　<tspan x="40" y="60" police-poids="gras">Texte de base en ligne multiple.</tspan>
　　　</text>
　　</g>
　</svg>

Effet après exécution :

Explication de l'utilisation

x : il définit la position en haut à gauche.

y : il définit la position du haut.

width : définit la largeur.

height : définit la hauteur.

fill : l'attribut fill est utilisé pour définir la couleur de remplissage.

Texte de lien hypertexte

Il est utilisé pour créer un texte avec un lien hypertexte.

　　　　　　<svg largeur="500" hauteur="100">
　　　　　　　　　<g>
　　　　　　　　　　　　<text x="20" y="10"Text comme lien: </text>
　　　　　　　　　
　　　　　　　　　　　　<a xlink:href="https://fr.oldtoolbag.com/svg-tutorial" target="_blank">
　　　　　　　　　　　　　　　<text font-family="Verdana" font-size="30" x="40" y="40"　
　　　　　　　　　　　　　　　fill="rgb(121,0,121)">fr.oldtoolbag.com</text>
　　　　　　　　　　　　</a>
　　　　　　　　　</g>
　　　　　　</svg>

Effet après exécution :

Explication de l'utilisation

x : il définit la position en haut à gauche.

y : il définit la position du haut.

width : définit la largeur.

height : définit la hauteur.

fill : l'attribut fill est utilisé pour définir la couleur de remplissage.