Dessiner avec SVG - sommaire

SVG : gestion du 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 spécifiques au langage SVG : stroke, fill, fill-opacity, etc.

Exemple 1 : la balise text

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

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

Je rappelle que la balise SVG est un élément HTML. Donc on peut lui appliquer la propriété background (et non pas fill).

Notez l'emploi de 6 classes qui ont été définies dans la feuille de style.
La valeur de fill peut être "none" pour créer une transparence.

A chaque balise text on associe deux classes :
• une pour la mise en forme des caractères
• une pour le positionnement horizontal du texte par rapport à l'attribut x de la balise text

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

La propriété text-anchor est spécifique au texte SVG et prend trois valeurs :
• start (valeur par défaut) : le texte se positionne à gauche de x
• middle : le texte se positionne autour du point x (c'est SVG qui fait les calculs)
• end : le texte se positionne à droite de x

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 :

le code CSS

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 :

Le code SVG

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 texte est sur une courbe cubique !

Le code correspondant

Commentaire

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