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 :

Copier le code

Le code est le suivant :

SVG

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 :

Copier le codeLe code est le suivant :

Ceci est en gras et rouge

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 :

Copier le codeLe code est le suivant :

Bonjour tout le monde !
C'est en gras et rouge

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.

Copier le codeLe code est le suivant :

Bonjour tout le monde !
C'est en gras et rouge
< /texte>


textLength : C'est l'attribut le plus déroutant. On dit qu'après réglage, si le rendu constate que la longueur du texte n'est pas cohérente avec cette valeur, cette longueur prévaudra. Mais je ne l'ai pas essayé.

Référence de texte - élément tref
Cet élément permet de référencer un texte défini et de le copier efficacement à l'emplacement actuel, généralement en conjonction avec xlink:href pour spécifier l'élément de destination. Parce qu'il est copié, lorsque vous utilisez CSS pour modifier le texte actuel, le texte original ne sera pas modifié. Regardez l'exemple :

Copiez le code

Le code est le suivant :

Ceci est un exemple de texte.


< /text>

Chemin du texte - élément textPath
C'est plus intéressant, l'effet est également cool et peut créer de nombreux effets artistiques, cet élément obtient le chemin spécifié ; à partir de son attribut xlink:href Et alignez le texte sur ce chemin, voir l'exemple :

Copiez le code

Le code est la suivante :

Ce texte suit une courbe.

Rendu des images en SVG - élément d'image
SVG L'élément d'image dans peut directement prendre en charge l'affichage d'images raster et est très simple à utiliser. Regardez l'exemple ci-dessous :

Copiez le code

Le code est le suivant :

Quelques points à noter ici :
1. Si la coordonnée x ou y n'est pas définie, le la valeur par défaut est 0.

2. Si la largeur ou la hauteur n'est pas définie, la valeur par défaut est également 0.

3. Si la largeur ou la hauteur est explicitement définie sur 0, le rendu de cette image sera interdit.

4. Le format d'image prend en charge png, jpeg, jpg, svg, etc., donc svg prend en charge les svg imbriqués.

5.image, comme d'autres éléments, est un élément régulier de svg, il prend donc en charge tous les recadrages, masquages, filtres, rotations et autres effets.

Référence pratique :
Index du script : http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
Centre de développement : https://developer.mozilla.org/en/SVG
Référence populaire : http://www.chinasvg.com/
Documentation officielle : http://www.w3.org/TR/SVG11/