<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 bestehend aus Text. Es ist möglich, einen Verlauf, ein Muster, einen Clipping-Pfad, eine Maske oder einen Filter auf <text> anzuwenden, wie bei jedem anderen SVG-Grafikelement.

Wenn Text in SVG enthalten ist, der sich nicht in einem <text>-Element befindet, wird er nicht gerendert. Dies unterscheidet sich davon, standardmäßig versteckt zu sein, da das Setzen der display-Eigenschaft den Text nicht anzeigt.

Hinweis: Das <text>-Element umbricht standardmäßig nicht, um dies zu erreichen, muss es mit der CSS-Eigenschaft white-space gestaltet werden.

Beispiel

html
<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 Textlinie 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 Textlinie 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 Attribut textLength definierte Breite zu passen. Wertetyp: spacing|spacingAndGlyphs; Standardwert: spacing; Animierbar: ja

textLength

Eine Breite, auf die der Text skaliert werden soll. Wertetyp: <length>|<percentage> ; Standardwert: none; Animierbar: ja

Verwendungskontext

KategorienGrafikelement, Element mit Textinhalt
Erlaubter InhaltZeichendaten und beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge:
Animationselemente
Beschreibende Elemente
Untergeordnete Elemente mit Textinhalt
<a>

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# TextElement

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text
dx
dy
fill
context-fill value
lengthAdjust
rotate
systemLanguage
textLength
x
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Verwandtes

Siehe auch