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>
     <text>
          <tspan>我是</tspan><tspan>中国人</tspan>
     </text>
     <path></path>
</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>
     <text>我是中国人</text>
     <text>我是中国人</text>
     <text>我是中国人</text>
     <path></path>
</svg>

The tag

allows text to be arranged on a specified path.

<svg>
     <path></path>
     <text>
          <textpath>我是根据固定曲线来绘制的文字方向</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!