Texte SVG
Texte SVG - L'élément <text>
<text>
Exemple 1
Écrivez un texte :
J'adore SVG
Ce qui suit est le code SVG :
Instance
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="0" y="15" fill="red">I love SVG</text> </svg> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Pour les utilisateurs d'Opera : Visualisez le fichier SVG (clic droit sur la source d'aperçu graphique SVG).
Exemple 2
Texte pivoté :
Ce qui suit est le code SVG :
Exemple
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text> </svg> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Pour Opera utilisateurs : Afficher le fichier SVG (clic droit sur la source d'aperçu graphique SVG).
Exemple 3
Texte sur le chemin :
Ce qui suit est le code SVG :
Instance
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="path1" d="M75,20 a1,1 0 0,0 100,0" /> </defs> <text x="10" y="100" style="fill:red;"> <textPath xlink:href="#path1">I love SVG I love SVG</textPath> </text> </svg> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Pour les utilisateurs d'Opera : affichez le fichier SVG (clic droit sur la source d'aperçu graphique SVG). Les éléments de l'
Exemple 4
peuvent être organisés en n'importe quel nombre de groupes avec les éléments <tspan> Chaque élément <tspan> peut contenir différents formats et positions. Plusieurs lignes de texte (avec éléments <tspan>) :
Plusieurs lignes :
Première ligne Deuxième ligne
Voici le code SVG :
Instance<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="10" y="20" style="fill:red;">Several lines: <tspan x="10" y="45">First line</tspan> <tspan x="10" y="70">Second line</tspan> </text> </svg> </body> </html>
Pour les utilisateurs d'Opera : Visualisez le fichier SVG (clic droit sur la source d'aperçu graphique SVG).
J'adore SVG
ci-dessous Le code SVG est-il :
Instance<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://www.php.cn/" target="_blank"> <text x="0" y="15" fill="red">I love SVG</text> </a> </svg> </body> </html>
Pour les utilisateurs d'Opera : affichez le fichier SVG (clic droit sur la source d'aperçu graphique SVG).
