L'une des capacités puissantes de SVG est qu'elle peut contrôler le texte à un niveau impossible pour les pages HTML standard sans avoir besoin de recourir à des images ou à d'autres plugins. Toute action qui peut être effectuée sur une forme ou un chemin (comme le dessin ou le filtrage) peut être effectuée sur du texte. Bien que le rendu du texte de SVG soit si puissant, il y a toujours un inconvénient: SVG ne peut pas effectuer un emballage automatique des lignes. Si le texte est plus long que l'espace autorisé, coupez-le simplement. Dans la plupart des cas, la création de plusieurs lignes de texte nécessite plusieurs éléments de texte.
De plus, vous pouvez utiliser l'élément TSPAN pour diviser l'élément texte en sections, permettant à chaque section d'avoir son propre style.
De plus, dans les éléments de texte, le traitement des espaces est similaire à HTML: les pauses de ligne et les retours de chariot deviennent des espaces, tandis que plusieurs espaces sont comprimés en un seul espace.
Texte affiché directement dans l'image - élément texte Pour afficher le texte directement, vous pouvez utiliser des éléments de texte, comme suit:<SVG>
<rect fill = "red" />
<cercle cx = "150" cy = "100" r = "80" fill = "green" />
<text x = "150" y = "125" font-size = "60" text-anchor = "middle" fill = "white"> svg </ text>
</svg>
Comme indiqué dans l'exemple ci-dessus, l'élément texte peut définir les propriétés suivantes:
x, y sont les coordonnées de position du texte. L'ancienne texto est la direction de l'affichage de texte, qui est en fait la position (x, y) en position de texte. Cette propriété a trois valeurs: Démarrer, milieu et fin. Démarrer signifie que la coordonnée de position du texte (x, y) est située au début du texte, et le texte s'affiche un par un à droite à partir de ce point. Les moyens moyens (x, y) sont situés au milieu du texte, et le texte s'affiche dans les directions gauche et droite, qui est en fait centrée. La fin signifie que les points (x, y) sont à la fin du texte, et le texte s'affiche un par un à gauche.En plus de ces propriétés, les propriétés suivantes peuvent être spécifiées dans CSS ou directement dans les propriétés:
Remplissez, tronçant: remplir et caresser les couleurs, l'utilisation spécifique est résumé ultérieurement. Attributs connexes de la police: Font-Family, Style, Font, Font-Weight, Font-Variant, Font-Stretch, Font-Size, Font-Size-Adjust, Kerning, Letter Espacing, Wordspacing and Text-Decoration. Intervalle de texte - élément TSPAN Cet élément est un complément puissant à l'élément texte; Il est utilisé pour rendre du texte dans un intervalle; Il ne peut apparaître que dans l'élément texte ou les éléments enfants de l'élément TSPAN. Une utilisation typique consiste à mettre l'accent sur l'affichage d'une partie du texte. Par exemple:<Text>
<tspan font-weight = "bold" fill = "red"> C'est audacieux et rouge </span>
</Text>
L'élément TSPAN possède les propriétés suivantes qui peuvent être définies: x, y est utilisé pour définir la valeur de coordonnée absolue du texte contenu, qui remplacera la position texte par défaut. Ces propriétés peuvent contenir une série de nombres appliqués à chaque caractère unique correspondant. Les caractères qui n'ont pas de paramètres correspondants suivront le caractère précédent. Par exemple:
<text x = "10" y = "10"> Bonjour le monde!
<tspan x = "100 200 300" font-weight = "bold" fill = "red"> C'est audacieux et rouge </span>
</Text>
DX, DY est utilisé pour définir le décalage du texte contenu par rapport à la position texte par défaut. Ces propriétés peuvent également contenir une série de nombres, chacune appliquée au caractère correspondant. Les caractères qui n'ont pas de paramètres correspondants suivront le caractère précédent. Vous pouvez changer x de l'exemple ci-dessus en dx pour voir l'effet. La rotation est utilisée pour régler l'angle de rotation de la police. Cette page de propriété peut contenir une série de nombres appliqués à chaque caractère. Les caractères qui n'ont pas de paramètres correspondants utiliseront le dernier ensemble de numéros.
<text x = "10" y = "10"> Bonjour le monde!
<tspan rotate = "10 20 45" font-weight = "bold" fill = "red"> C'est audacieux et rouge </span>
</Text>
TextLength: c'est la propriété la plus déroutante. On dit qu'après l'avoir réglé, lorsque le rendu constate que la longueur du texte est incompatible avec cette valeur, cette longueur sera la base. Mais je ne l'ai pas essayé. Quotion texte - élément Tref
Cet élément permet une référence au texte défini et le copier efficacement à l'emplacement actuel, généralement avec l'élément cible spécifié XLink: HREF. Parce qu'il a été copié, lors de l'utilisation de CSS pour modifier le texte actuel, le texte d'origine ne sera pas modifié. Voir l'exemple:
<text id = "example"> Il s'agit d'un exemple de texte. </XET>
<Text>
<Tref xLink: href = "# Exemple" />
</Text>
Chemin de texte - élément TextPath Ceci est plus intéressant, l'effet est également cool et il peut produire de nombreux effets artistiques; Cet élément prend le chemin spécifié de son attribut xLink: HREF et aligne le texte sur ce chemin, voir l'exemple:<path id = "my_path" d = "m 20,20 c 40,40 80,40 100,20" />
<Text>
<textPath xLink: href = "# my_path"> Ce texte suit une courbe. </ textPath>
</Text>
Image de rendu dans SVG - Élément d'image L'élément d'image dans SVG peut prendre directement une prise en charge de l'affichage des images raster, qui est très facile à utiliser. Voir l'exemple suivant:<SVG>
<image xLink: href = "Penguins.jpg" x = "0" y = "0" />
</svg>
Quelques points à noter ici :1. Si les coordonnées X ou Y ne sont pas définies, 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 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 le SVG imbriqué.
5. L'image est un élément régulier de SVG, tout comme les autres éléments, il prend donc en charge tous les effets tels que la culture, le masquage, le filtrage, la rotation, etc.
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/
Document officiel: http://www.w3.org/tr/svg11/