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

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>

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>

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>

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!