<text>
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
* Some parts of this feature may have varying levels of support.
Das <text> SVG Element zeichnet ein Grafikelement, das aus Text besteht. Es ist möglich, einen Verlauf, ein Muster, einen Ausschnittspfad, eine Maske oder einen Filter auf <text> anzuwenden, ebenso wie bei jedem anderen SVG-Grafikelement.
Wenn Text in SVG nicht innerhalb eines <text>-Elements enthalten ist, wird er nicht gerendert. Dies unterscheidet sich von standardmäßig verstecktem Text, da das Setzen der display-Eigenschaft den Text nicht anzeigen wird.
Hinweis:
Das <text>-Element umbricht standardmäßig nicht. Um dies zu ermöglichen, muss es mit der CSS-Eigenschaft white-space gestylt werden.
Beispiel
<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
<style>
.small {
font: italic 13px sans-serif;
}
.heavy {
font: bold 30px sans-serif;
}
/* Note that the color of the text is set with the *
* fill property, the color property is for HTML only */
.Rrrrr {
font: italic 40px serif;
fill: red;
}
</style>
<text x="20" y="35" class="small">My</text>
<text x="40" y="35" class="heavy">cat</text>
<text x="55" y="55" class="small">is</text>
<text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>
Attribute
x-
Die x-Koordinate des Startpunkts der Textbasislinie oder die x-Koordinate jedes einzelnen Glyphs, wenn eine Liste von Werten angegeben wird. Wertetyp: Liste von (<length>|<percentage>); Standardwert:
0; Animierbar: ja y-
Die y-Koordinate des Startpunkts der Textbasislinie oder die y-Koordinate jedes einzelnen Glyphs, wenn eine Liste von Werten angegeben wird. Wertetyp: Liste von (<length>|<percentage>); Standardwert:
0; Animierbar: ja dx-
Verschiebt die Textposition horizontal von einem vorherigen Textelement, oder verschiebt die Position jedes einzelnen Glyphs, wenn eine Liste von Werten angegeben wird. Wertetyp: Liste von (<length>|<percentage>); Standardwert: none; Animierbar: ja
dy-
Verschiebt die Textposition vertikal von einem vorherigen Textelement, oder verschiebt die Position jedes einzelnen Glyphs, wenn eine Liste von Werten angegeben wird. Wertetyp: Liste von (<length>|<percentage>); Standardwert: none; Animierbar: ja
rotate-
Dreht die Ausrichtung jedes einzelnen Glyphs. Kann Glyphen individuell drehen. Wertetyp: <list-of-number>; Standardwert: none; Animierbar: ja
lengthAdjust-
Wie der Text gestreckt oder komprimiert wird, um in die durch das
textLength-Attribut definierten Breite zu passen. Wertetyp:spacing|spacingAndGlyphs; Standardwert:spacing; Animierbar: ja textLength-
Eine Breite, auf die der Text skaliert werden sollte. Wertetyp: <length>|<percentage>; Standardwert: none; Animierbar: ja
Verwendungskontext
| Kategorien | Grafikelement, Element mit Textinhalt |
|---|---|
| Erlaubter Inhalt | Zeichendaten und beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente Untergeordnete Elemente mit Textinhalt <a> |
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # TextElement |