Utilisation de texte dans des graphiques vectoriels évolutifs (SVG)

Dans nos précédents articles, nous avons utilisé SVG pour créer des formes. Comme le titre le dit, dans ce billet, nous allons examiner créer du texte avec SVG. Nous pouvons faire beaucoup de choses avec du texte au-delà de ce que le texte HTML brut est capable de faire..

Alors, vérifions-les.

Mise en œuvre de base

Mais avant d’aller plus loin, voyons comment Texte en SVG est formé à son niveau de base:

Le texte en SVG, comme vous pouvez le constater à partir de l'extrait de code ci-dessus, est défini avec une balise suffisamment logique, . Cet élément nécessite uniquement X et y attributs pour spécifier les coordonnées de la ligne de base.

Source de l'image: Wikipedia.org

Et voici à quoi ressemblera le texte. Pour l'instant, il semble qu'il n'y ait aucune différence avec le texte normal en HTML.

Styles de texte de base

Le texte peut également être stylé avec des propriétés CSS telles que poids de la police, le style de police, et texte-décoration qui peut être mis en œuvre soit par le biais style en ligne, style interne ou style externe comme nous avons discuté dans le post précédent à propos de Styler SVG avec CSS. Voici quelques exemples.

Audacieux

 Ceci est un texte au format SVG (Scalable Vector Graphic)

Italique

 Ceci est un texte en italique dans Scalable Vector Graphic (SVG)

Souligner

 Texte souligné dans le document Scalable Vector Graphic (SVG)

Élément

Dans certains cas, lorsque nous voulons uniquement appliquer des styles ou des attributs à une partie particulière du texte, nous pouvons utiliser . Cet exemple ci-dessous montre comment nous ajoutons audacieux, italique et souligner à une seule ligne de texte.

 C'est audacieux, c'est en italique et c'est souligné

Mode d'écriture

Le texte n'est pas seulement écrit à partir de de gauche à droite. Dans d’autres parties du monde, au Japon par exemple, le texte est rédigé à partir de de haut en bas. En SVG, cela peut être fait en utilisant le mode d'écriture attribut.

 ぅ ぇ か き

Dans l'exemple ci-dessus, nous avons mis plusieurs caractères japonais aléatoires (ne me demandez pas leur sens, je n'en ai aucune idée) et modifions l'orientation avec cette déclaration de style., mode d'écriture: tb, où tb est stand pour de haut en bas.

Contour de texte

Le texte en SVG est fondamentalement un graphique, afin que nous puissions aussi appliquer le accident vasculaire cérébral attribuer pour ajouter une ligne de bordure au texte comme nous l'avons fait avec les autres formes.

Dans l'extrait de code ci-dessus, nous avons ajouté le accident vasculaire cérébral attribuer à la élément et supprimez la couleur du texte en spécifiant le remplir attribuer à aucun qui aboutira à la présentation de texte suivante.

Chemin du texte

En SVG, le texte peut non seulement être affiché horizontalement et verticalement, mais aussi suivre un modèle de chemin. Voici comment faire.

Tout d'abord, nous devons définir le chemin. Cependant, créer un chemin directement en HTML n’est pas si intuitif, nous avons besoin de comprendre les coordonnées et certaines commandes que la plupart d’entre nous essaieront d’éviter. Donc, pour simplifier cette étape, je suggère personnellement d'ouvrir un éditeur de vecteur (Inkscape ou Illustrator), de créer un chemin et de générer le code SVG..

Ensuite, mettez le élément à l'intérieur d'un élément. defs ici signifie définition.

Notez que nous avons également ajouté un identifiant attribuer à la . Maintenant, il suffit de relier le chemin identifiant à notre texte avec élément, comme tel;

    Lorem ipsum dolor sit amet consectetur.

Lectures complémentaires: Chemins SVG

Dégradé de texte

Ajouter un fond pour remplir le texte est également possible en SVG, et si vous avez réussi dans la section Chemin du texte ci-dessus, cela serait beaucoup plus facile..

Tout d'abord, nous devons définir les couleurs du dégradé.

Lorsque toutes les définitions nécessaires sont définies, il ne reste plus qu’à ajouter le texte et à se référer au remplir attribuer au dégradé identifiant attribut, comme suit;

 Pente

Et le voici avec le texte en dégradé.

Lectures complémentaires: Gradient et motif SVG

Références supplémentaires

Le texte en SVG est sans aucun doute puissant, il y a en fait beaucoup de choses que nous pouvons faire au-delà de ce que nous pouvons accueillir dans ce post. Nous avons donc rassemblé ci-dessous quelques références supplémentaires pour répondre à votre intérêt pour ce sujet..

À propos des polices en SVG - Divya Manian
Texte officiel SVG - W3.org
SVG Dovumentation chez Mozilla Dev. Réseau avec exemples et outils - MDN
Attribut de mode d’écriture SVG - MDN

Voir la démo
Source de téléchargement