Texte

In SVG-Dokumenten können Sie selbstverständlich auch einen Text platzieren. Hierfür benötigen Sie das SVG-Element text. Die Positionierung erfolgt wie gewohnt mit den Attributen x und y. Die Farbe des Textes wird über das Attribut fill festgelegt. Soll der Text zusätzlich über einen Umriss verfügen, so können Sie die Attribute stroke und stroke-width nutzen. Die Schrifteinstellungen können über einige weitere Attribute festgelegt werden. Die Namen und deren Bedeutung sind mit den CSS-Eigenschaften vergleichbar: font-family (Name der Schriftart), font-size (Schriftgröße), font-style (Stil der Schrift, italic für Kursivschrift), font-weight (Schriftdicke, bold für Fettdruck) und text-decoration (Dekoration der Schrift, z. B. underline zum Unterstreichen). Ein weiteres nützliches Element ist tspan. tspan kann innerhalb des text-Elements notiert werden und wird dazu verwendet, einzelne Teile eines Textes hervorzuheben (z. B. durch eine Farbe, einen Umriss oder eine andere Schriftgröße).

Wichtig: Das x- und y-Attribut legt standardmäßig die Position des ersten Buchstabens (X-Achse) auf der Grundlinie (Y-Achse) fest, d. h. der Text ist linksbündig. Um dies zu ändern, können Sie das Attribut text-anchor verwenden. Mögliche Werte für dieses Attribut sind start (linksbündig, Standardwert), middle (zentriert) und end (rechtsbündig). Verwenden Sie z. B. den Wert middle, so gibt der Wert des x-Attributs die mittlere Position des Textes an.