svg tag: Application of tag and tag (code)

The content shared with you in this article is about the application (code) of svg tags: tag and tag. It has certain reference value. Friends in need can refer to it. I hope It will help you.

text attribute

x: Text drawing x-axis position
y: Text drawing y-axis position
dx: Each The offset distance of a character relative to the previous character
dy: The offset distance of each character relative to the previous character

<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>

The text is centered horizontally and vertically

Horizontal arrangement

The text-anchor attribute can set the horizontal arrangement of text. There are three values: 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>

The tag

allows text to be arranged on a specified path.

<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>

The browser will not render the part beyond the Path.

The offset of the text on the path can use the positioning attributes x, y, dx, dy, text-anchor and startOffset attributes.

1. x/dx/startOffset can set the starting point of character rendering on the path.

2. y attribute settings have no effect.

3. dy can set the offset of the character on the normal line.

4. text-anchor is to set the horizontal arrangement effect of text.

Recommended related articles:

How to implement coordinate system transformation in svg (with code)

svg中< Use of ;marker> elements and introduction to marker attributes

The above is the detailed content of svg tag: Application of tag and tag (code). For more information, please follow other related articles on the PHP Chinese website!