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).
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 600 400">
<text x="30" y="75" fill="lime" font-size="60px">Herzlich Willkommen</text>
<text x="275" y="150" fill="lime" font-size="40px">auf</text>
<text x="75" y="250" font-size="50px">
<tspan fill="red">Home</tspan><tspan fill="blue">page</tspan>
<tspan fill="yellow">-</tspan>
<tspan fill="purple">Webhilfe</tspan>
</text>
</svg>
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.