SVG-Text<text>

In SVG wird das<text>Das Element wird verwendet, um Textinhalte zu einem SVG-Bild hinzuzufügen. Dadurch können Sie Text an angegebenen Positionen anzeigen und den Stil, die Schriftart, die Größe usw. des Textes über Attribute steuern.

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

Attributerklärung:

xundyDas Attribut definiert die Koordinaten der oberen linken Ecke des Textes, d. h. die Startposition des Textes.
font-familyDas Attribut definiert den Schriftartnamen des Textes, der eine Systemschriftart oder eine benutzerdefinierte Schriftart sein kann.
font-sizeDas Attribut definiert die Schriftgröße des Textes in Pixeln.
fillDas Attribut definiert die Farbe des Textes.
text-anchorDas Attribut definiert den Textanker, d. h. die Ausrichtung des Textes relativ zu den angegebenen Koordinaten. Übliche Werte sind "start" (Standard, linksbündig), "middle" (zentriert) und "end" (rechtsbündig).

Der folgende Code zeichnet einen Text in ein SVG-Bild. Der Textinhalt ist "Hello, SVG!", die Schriftart ist Arial, die Größe beträgt 20 Pixel, die Farbe ist blau, er ist zentriert und die Koordinaten der oberen linken Ecke des Textes sind (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>