SVG et le texte

Le texte doit être à l'intérieur du conteneur text.

Concernant le style vous pouvez utiliser les propriétés CSS font-size, font-family, font-weight, text-decoration, text-shadow, etc.
Par contre pour les couleurs de trait et de remplissage il faut utiliser les propriétés propres au langage SVG : stroke, fill.

Exemple 1 : la balise text

balise text de SVG Première ligne de texte en SVG Seconde ligne jQuery

Remarquez que pour les deuxième et troisième lignes les caractères ne sont remplis mais ont simplement un contour.
Notez aussi l'ombrage pour la troisième ligne.

Le CSS correspondant

text, tspan {font-family : arial ;} circle {fill : red ; } .ligne1{font-size:18px; } .ligne2{font-size:60px; fill : none; stroke:blue; stroke-width:2px; } .ligne3{font-size: 100px; fill:none ; stroke:gold; stroke-width:4px; text-shadow : 10px 10px 10px grey ; } .debut {text-anchor : start; } .milieu {text-anchor : middle ; } .fin {text-anchor : end ; }

Pour que les caractères ne soient pas remplis mais simplement un contour plus ou moins épais il faut mettre fill à none, préciser une couleur et une épaisseur de trait avec les propriétés stroke, stroke-width.

Le code SVG correspondant

La zone de dessin fait 600 par 300.

<svg ... <text class = "ligne1 debut" x="100" y="20">Première ligne de texte en SVG</text> <circle cx = '100' cy = '20' r = '2' /> <text class = "ligne2 milieu" x="300" y="100">Seconde ligne</text> <circle cx = '300' cy = '100' r = '2' /> <text class = "ligne3 fin" x="300" y="200">jQuery</text> <circle cx = '300' cy = '200' r = '2' /> </svg> ...

Notez l'emploi de 6 classes qui ont été définies dans la feuille de style.

On utilise à cette fin la propriété CSS text-anchor qui gère l'alignement du texte

J'ai dessiné trois ronds rouges correspond aux coordonnées x et y de chaque balise text afin que vous visualisiez bien le positionnement du texte en fonction de la valeur de la propriété text-anchor.

Dans les deux dernières lignes les lettres ne sont pas pleines (fill : none) mais on dessine simplement le contour de la lettre en jouant sur les propriétés stroke et stroke-with.
Dans la troisième ligne on ajoute une ombre aux lettres grâce la propriété text-shadow (voir tutoriel CSS3).

Texte multiligne avec positionnement en absolu

Si vous voulez présenter un texte multiligne vous devez utiliser à l'intérieur du conteneur text la balise tspan.
Ci-dessous le premier couplet de l'hymne national : Premier couplet Allons, enfants de la Patrie, Le jour de gloire est arrivé ! Contre nous de la tyrannie L'étendard sanglant est levé, (bis) Entendez-vous dans les campagnes Mugir ces féroces soldats ? Ils viennent jusque dans vos bras Égorger vos fils, vos compagnes !

le code CSS

text, tspan {font-family : arial ;} .marseille {font-size :14px; text-anchor : middle ; stroke : navy ; }

Le code SVG correspondant

La zone de dessin fait 600 par 300.

... <text x ="300" y="60" class ="marseille">Premier couplet <tspan x ="300" y="100" style ="font-style : italic ;">Allons, enfants de la Patrie, <tspan x ="300" y="120">Le jour de gloire est arrivé !</tspan> <tspan x ="300" y="140" >Contre nous de la tyrannie</tspan> <tspan x ="300" y="160">L'étendard sanglant est levé, (bis)</tspan> <tspan x ="300" y="180">Entendez-vous dans les campagnes</tspan> <tspan x ="300" y="200">Mugir ces féroces soldats ?</tspan> <tspan x ="300" y="220" >Ils viennent jusque dans vos bras</tspan> <tspan x ="300" y="240">Égorger vos fils, vos compagnes !</tspan> </text> ...

Commentaire

A chaque balise tspan correspond un saut de ligne.
Mise en forme homogène de tout le texte grâce au recours à une classe intitulé "emarseille".
Pour chaque balise text ou tspan les attributs x et y sont obligatoires !

Il n'est pas nécessaire d'utiliser l'attribut STYLE dans toutes les balises TPSAN mais simplement à la première, les autres balises héritent de la mise en italique à condition de ne pas fermer la première balise tspan !

Texte multiligne avec positionnement en relatif

Le code SVG précédent présente un gros inconvénient. Si on change l'attribut y de la balise TEXT il faut modifier les attributs y de toutes les balises TSPAN.

Le refrain de la Marseillaise : Refrain Aux armes, citoyens Formez vos bataillons Marchons, marchons ! Qu'un sang impur Abreuve nos sillons !

Le code SVG

... <text x ="300" y="100" class ="marseille">Refrain <tspan x="300" dy ="20" style ="font-style : italic ;"> Aux armes, citoyens <tspan x="300" dy ="20">Formez vos bataillons</tspan> <tspan x="300" dy ="20">Marchons, marchons !</tspan> <tspan x="300" dy ="20">Qu'un sang impur</tspan> <tspan x="300" dy ="20">Abreuve nos sillons !</tspan> </text> ...

Commentaire

Pour la première ligne de texte le positionnement est noté en absolu mais pour les autres lignes et concernant la hauteur la notation est en relatif (20 pixels plus bas que la précédente).
Il existe aussi l'attribut dx pour une éventuelle notation en relatif sur l'axe X.
Notez que la première balise tspan n'est pas fermée afin que les autres lignes héritent du style italique !

Texte le long d'un chemin

Le SVG est un langage très amusant

Le texte est sur une courbe cubique !

Le code correspondant

... <path d ="M 100,100 c100,-150 200,150 300,0" id ="chemin" fill ="none"/> <text> <textPath xlink:href ="#chemin" style ="font-size : 20px;">Le SVG est un langage très amusant</textPath> </text> ...

Commentaire

Il faut définir et identifier un chemin : ici une courbe cubique identifiée "chemin".
La balise text doit contenir la balise textPath
Retour menu