Maison > interface Web > Tutoriel H5 > Balise svg : Application de la balise et de la balise (code)

Balise svg : Application de la balise et de la balise (code)

不言
Libérer: 2018-08-06 14:21:56
original
3034 Les gens l'ont consulté

Le contenu partagé avec vous dans cet article concerne l'application (code) des balises svg : la balise et la balise . J'espère qu'elle a une certaine valeur de référence. Cela vous aidera.

attribut de texte

x : position sur l'axe x du dessin du texte
y : position sur l'axe y du dessin du texte
dx : each La distance de décalage d'un caractère par rapport au caractère précédent
dy : La distance de décalage de chaque caractère par rapport au caractère précédent

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <text x="100" y="100" dy="100" fill="black" style="font-size:40px;">
          <tspan fill="blue" dy="-20 10">我是</tspan><tspan fill="red">中国人</tspan>
     </text>
     <path d="M100,0 V200 M0,100 H200" stroke="red"/>
</svg>
Copier après la connexion

Le texte est centré horizontalement et verticalement

Arrangement horizontal

L'attribut text-anchor peut définir le texte à organiser horizontalement. Il a trois valeurs : start middle | | end

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <text x="200" y="50" text-anchor="start" fill="black" style="font-size:40px;">我是中国人</text>
     <text x="200" y="100" text-anchor="middle"  fill="black" style="font-size:40px;">我是中国人</text>
     <text x="200" y="150" text-anchor="end" fill="black" style="font-size:40px;">我是中国人</text>
     <path d="M200,0 V200 M0,100 H400" stroke="red"/>
</svg>
Copier après la connexion

balise

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <path id="p1" d="M100,200 Q200 100 300 200 T 500 200" stroke="green" fill="none"/>
     <text style="font-size:20px;">
          <textPath xlink:href="#p1">我是根据固定曲线来绘制的文字方向</textPath>
     </text>
</svg>
Copier après la connexion

Le navigateur ne restituera pas la partie au-delà du chemin.

Le décalage du texte sur le chemin peut être déterminé en positionnant les attributs x, y, dx, dy, text-anchor et startOffset.

  1. x/dx/startOffset peut définir le point de départ du rendu des caractères sur le chemin.

  2. y paramètres d'attribut n'ont aucun effet.

  3. dy peut définir le décalage du caractère sur la ligne normale.

  4. text-anchor permet de définir l'effet de disposition horizontale du texte.

Articles connexes recommandés :

Comment implémenter la transformation du système de coordonnées en svg (avec code)

svg in< ;marker>Utilisation des éléments et introduction aux attributs des marqueurs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
svg
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal