Balise text de SVG - emploi de classes en SVG

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

Le code de cette page (extraits)

... <style> text {font-family : arial ; font-weight : bold} circle {fill : red ; } .ligne1{ font-size:18px; } .ligne2{ font-size:60px; fill : none; stroke:blue; stroke-width:3px; } .ligne3{ font-size: 100px; fill:none ; stroke:gold; stroke-width:6px; text-shadow : 10px 10px 10px grey ; } .debut {text-anchor : start; } .milieu {text-anchor : middle ; } .fin {text-anchor : end ; } ... <svg width="100%" height="auto" viewBox ="0 0 600 300"> <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">JS</text> <circle cx = '300' cy = '200' r = '2' /> </svg> ...

Commentaire du code

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

On utilise à cette fin la propriété CSS text-anchor.

Dans le cadre du "Responsive Web Design" la valeur de la propriété width de la balise SVG est 100% et un nouvel attribut viewBox apparaît ...
Je n'en dis pas plus pour le moment. L'adaption des canevas SVG à tous les types d'écrans est expliquée dans la page suivante.

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 par rapport à 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).

Retour menu