SVG-Text
Beschreibung des <text>-Elements
Das SVG <text>-Element definiert ein Grafik-Element zur Anzeige von Text. Auf <text> können, wie bei anderen SVG-Grafik-Elementen, Muster, Clip-Pfade, Masken, Verläufe oder Filter angewendet werden. Text, der nicht in ein <text>-Element eingebettet ist, wird nicht gerendert. Text innerhalb eines <text>-Elements kann hingegen automatisch umgebrochen, vorformatiert oder auf einem Pfad gerendert werden.
SVG-Text unterstützt typografische Funktionen wie Textdekorationen, die Wahl der Schriftart sowie die Verwendung von freiwilligen, stilistischen oder historischen Ligaturen.
SVG unterstützt auch internationale Textverarbeitungsanforderungen:
- Links-nach-rechts- oder bidirektionaler Text,
- die vertikale und horizontale Ausrichtung von Text,
- komplexes Textlayout,
- die Ausrichtung von Glyphen an verschiedenen Grundlinien.
Es ist möglich, mehrsprachigen SVG-Inhalt zu erstellen, indem verschiedene Textzeichenfolgen basierend auf der bevorzugten Sprache des Benutzers ersetzt werden.
Um Text zu gestalten, können Sie textspezifische CSS-Eigenschaften wie font-family, font-size, kerning, letter-spacing, word-spacing, text-decoration, stroke, stroke-width und fill verwenden.
Beispiel für das SVG <text>-Element:
Beispiel für das SVG <text>-Element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="60" >
<text x="20" y="25" fill="purple">This is a SVG text example.</text>
Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Beispiel für das SVG <text>-Element mit dem rotate-Attribut:
Beispiel für das SVG <text>-Element mit dem rotate-Attribut
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="150" style="border:1px solid red">
<text x="20" y="25" fill="purple" transform="rotate(40 30,60)">This is a SVG text example.</text>
Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Im folgenden Beispiel wird das <text>-Element zusammen mit dem <tspan>-Element verwendet, das unterschiedliche Formatierungen und Positionen enthalten kann.
Beispiel für das SVG <text>-Element in Kombination mit dem <tspan>-Element:
Beispiel für das SVG <text>-Element in Kombination mit dem <tspan>-Element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="450" height="150" style="border:1px solid #cccccc">
<text x="20" y="20" style="fill:green">
Example of the SVG "text" element used with the "tspan" element
<tspan x="25" y="65">This is a SVG text.</tspan>
<tspan x="35" y="90">This is a SVG text.</tspan>
<tspan x="45" y="115">This is a SVG text.</tspan>
</text>
Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Beispiel für das SVG <text>-Element in Kombination mit dem <a>-Element:
Beispiel für das SVG <text>-Element in Kombination mit dem <a>-Element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="60" style="border:1px solid #cccccc">
<a href="https://www.w3docs.com/learn-html/svg-intro.html" target="_blank">
<text x="20" y="40" fill="blue" font-size="2em">SVG Intro</text>
</a>
Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Attribute
| Attribut | Beschreibung |
|---|---|
| x | Gibt die Start-x-Koordinate der Textgrundlinie an. |
| y | Gibt die Start-y-Koordinate der Textgrundlinie an. |
| dx | Gibt die horizontale Verschiebung einer Textposition gegenüber einer vorherigen Textposition an. |
| dy | Gibt die vertikale Verschiebung einer Textposition gegenüber einer vorherigen Textposition an. |
| rotate | Gibt die Drehung der Ausrichtung für jedes einzelne Glyph an. |
| lengthAdjust | Legt fest, wie der Text komprimiert oder gestreckt wird, um die durch das textLength-Attribut definierte Breite anzupassen. |
| textLength | Legt die Breite fest, die der Text einnehmen muss. |
| text-anchor | Legt die horizontale Ausrichtung des Textes fest. |
| dominant-baseline | Legt die vertikale Ausrichtung des Textes fest. |
Das SVG <text>-Element unterstützt auch Globale Attribute und Ereignisattribute.
Praxis
Was kann mit dem SVG-'text'-Element in HTML erreicht werden?