SVG Text<text>

In SVG, the<text>element is used to add text content to an SVG image, allowing you to display text at specified positions and control the text's style, font, size, etc. through attributes.

Basic Syntax

<text
  x="x-coordinate"          <!-- 文本左上角的 x 坐标 -->
  y="y-coordinate"          <!-- 文本左上角的 y 坐标 -->
  font-family="font"        <!-- 字体名称 -->
  font-size="size"          <!-- 字体大小 -->
  fill="fill-color"         <!-- 文本颜色 -->
  text-anchor="anchor"      <!-- 文本锚点 -->
>
  Text content              <!-- 文本内容 -->
</text>

Attribute explanation:

xandyThe attribute defines the coordinates of the top-left corner of the text, i.e., the starting position of the text.
font-familyThe attribute defines the font name of the text, which can be a system font or a custom font.
font-sizeThe attribute defines the font size of the text, in pixels.
fillThe attribute defines the color of the text.
text-anchorThe attribute defines the text anchor, i.e., the alignment of the text relative to the specified coordinates. Common values are "start" (default, left-aligned), "middle" (center-aligned), and "end" (right-aligned).

The following code draws a piece of text in an SVG image. The text content is "Hello, SVG!", the font is Arial, the size is 20 pixels, the color is blue, it is center-aligned, and the coordinates of the top-left corner of the text are (100, 100).

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="100" y="100" font-family="Arial" font-size="20" fill="blue" text-anchor="middle">Hello, SVG!</text>
</svg>