<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.

Das SVG-Element <text> zeichnet ein Grafikelement, das aus Text besteht. Es ist möglich, einen Farbverlauf, 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, jedoch nicht innerhalb eines <text>-Elements, wird er nicht gerendert. Dies ist anders als bei einer standardmäßigen Ausblendung, da das Setzen der display-Eigenschaft den Text nicht anzeigen wird.

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

Beispiel

html,
body,
svg {
  height: 100%;
}

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 Textgrundlinie 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 Textgrundlinie 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 die durch das textLength-Attribut definierte Breite zu erfüllen. Wertetyp: spacing|spacingAndGlyphs; Standardwert: spacing; Animierbar: ja
textLength: Eine Breite, auf die der Text skaliert werden sollte. Wertetyp: <length>|<percentage> ; Standardwert: none; Animierbar: ja

Gebrauchskontext

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

white-space