W3docs
de
Anmelden

SVG-Text

The SVG <text> element specifies a graphics element with a text. See the use of SVG <text> with other elements and learn what CSS properties can be used with it.

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>
Probier es selbst »

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>
Probier es selbst »

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>
Probier es selbst »

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>
Probier es selbst »

Attribute

AttributBeschreibung
xGibt die Start-x-Koordinate der Textgrundlinie an.
yGibt die Start-y-Koordinate der Textgrundlinie an.
dxGibt die horizontale Verschiebung einer Textposition gegenüber einer vorherigen Textposition an.
dyGibt die vertikale Verschiebung einer Textposition gegenüber einer vorherigen Textposition an.
rotateGibt die Drehung der Ausrichtung für jedes einzelne Glyph an.
lengthAdjustLegt fest, wie der Text komprimiert oder gestreckt wird, um die durch das textLength-Attribut definierte Breite anzupassen.
textLengthLegt die Breite fest, die der Text einnehmen muss.
text-anchorLegt die horizontale Ausrichtung des Textes fest.
dominant-baselineLegt die vertikale Ausrichtung des Textes fest.

Das SVG <text>-Element unterstützt auch Globale Attribute und Ereignisattribute.

Praxis

Übung

Was kann mit dem SVG-'text'-Element in HTML erreicht werden?