Accueil
Mes tutoriels sur la programmation

Traduction

Dessiner avec SVG - sommaire

Contenu de la page à la suite du sommaire.

Vous pouvez me contacter via Facebook (questions, critiques constructives) : Page Facebook relative à mon site

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 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.

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.

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

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

Commentaire

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