Tutoriel SVG

Élément SVG

Élément <textPath> SVG Élément <tspan> SVG

Élément <tref> SVG

L'élément <tref> SVG est utilisé pour faire référence au texte défini par l'élément <defs>. De cette manière, vous pouvez afficher le même texte plusieurs fois dans une image SVG sans devoir inclure plusieurs fois l'élément <text>.

Exemple en ligne

Voici un exemple :

Exemple

<svg width="100%" height="100%" viewBox="0 0　1000　300"
　　　　　xmlns="http://www.w3.org/2000/svg"　
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink="http:
　　<defs>
　　　　<text id="ReferencedText">
　　　　　　caractères de référence (oldtoolbag.com) </text>
　　</defs>
　　<text x="100" y="100" font-size="45" >
　　　　caractères en ligne de données (oldtoolbag.com) </text>
　　<text x="100" y="200" font-size="45" fill="red" >
　　　　<tref xlink:href="#ReferencedText"/>
　　</text>
　　<!--　Utiliser l'élément "rect" pour afficher le contour du canevas　-->
　　<rect x="1" y="1" width="598" height="198"
　　　　　　　　fill="none" stroke-width="2"　/></svg>

Testez pour voir‹/›

Effet d'image après l'exécution :

Attention à l'élément <text> (à l'intérieur de l'élément <defs>) qui a une propriété id. Cette valeur d'id est référencée par la propriété xlink:href de l'élément <tref>.

Élément <textPath> SVG Élément <tspan> SVG