Introduction au SVG 2D en HTML5 3 – Introduction au texte, aux images et au rendu des compétences du didacticiel text_html5

Rendu du texte en SVG

L'une des puissantes capacités de SVG est qu'il peut contrôler le texte à un degré impossible avec les pages HTML standard, sans recourir à des images ou à d'autres plug-ins. Toute opération pouvant être effectuée sur une forme ou un tracé (telle que la peinture ou le filtrage) peut être effectuée sur du texte. Bien que le rendu de texte de SVG soit si puissant, il existe toujours un inconvénient : SVG ne peut pas effectuer de retour à la ligne automatique des mots. Si le texte est plus long que l’espace autorisé, coupez-le simplement. Dans la plupart des cas, la création de texte multiligne nécessite plusieurs éléments de texte.
De plus, vous pouvez utiliser l'élément tspan pour diviser un élément de texte en plusieurs parties, permettant à chaque partie d'avoir son propre style.

De plus, dans l'élément texte, les espaces sont traités de la même manière qu'en HTML : les sauts de ligne et les retours chariot deviennent des espaces, et plusieurs espaces sont compressés en un seul espace.

Texte affiché directement dans l'image - élément texte
Pour afficher le texte directement, vous pouvez utiliser l'élément texte. Les exemples sont les suivants :

Comme indiqué dans l'exemple ci-dessus, les éléments de texte peuvent définir les attributs suivants :
x,y sont les coordonnées de position du texte. text-anchor est la direction d'affichage du texte, qui est en fait la position (x, y) du texte. Cet attribut a trois valeurs : début, milieu et fin. start signifie que les coordonnées de position du texte (x, y) sont au début du texte et que le texte est affiché un par un vers la droite à partir de ce point. Milieu signifie que (x, y) est situé au milieu du texte et que le texte est affiché dans les deux sens, ce qui est en fait centré. end signifie que le point (x, y) est à la fin du texte et que le texte est affiché un par un à gauche. En plus de ces attributs, les attributs suivants peuvent être spécifiés en CSS ou directement dans les attributs :

remplissage, contour : couleurs de remplissage et de contour, l'utilisation spécifique sera résumée plus tard. Attributs associés de la police : font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, crénage, espacement des lettres, espacement des mots et décoration du texte.

Plage de texte - élément tspan
Cet élément est un complément puissant à l'élément texte ; il est utilisé pour restituer le texte dans une plage, il ne peut apparaître que dans des éléments de texte ou tspan ; éléments dans les éléments enfants. Une utilisation typique consiste à mettre en évidence une partie du texte. Par exemple :

L'élément tspan a les attributs suivants : x, y sont utilisés pour définir les coordonnées absolues du texte inclus. Cette valeur remplacera la position par défaut du texte. Ces propriétés peuvent contenir une séquence de nombres appliqués à chaque caractère correspondant. Les caractères sans paramètres correspondants suivront immédiatement le caractère précédent. Par exemple :


dx,dy est utilisé pour définir le décalage du texte inclus par rapport à la position par défaut du texte. Ces propriétés peuvent également contenir une série de nombres dont chacun sera appliqué au caractère correspondant. Les caractères sans paramètres correspondants suivront immédiatement le caractère précédent. Vous pouvez remplacer x dans l'exemple ci-dessus par dx pour voir l'effet. rotate est utilisé pour définir l’angle de rotation de la police. Cette page de propriétés peut contenir une série de nombres qui s'appliquent à chaque caractère. Les caractères sans paramètre correspondant utiliseront le dernier numéro défini.