Texte

Grundlagen

Wir haben im Einführungsbeispiel gesehen, dass das text-Element verwendet werden kann, um beliebigen Text in SVG-Dokumenten zu platzieren:

<text x="10" y="10">Hello World!</text>

Die x- und y-Attribute bestimmen, wo im Ansichtsfenster der Text erscheint. Das Attribut text-anchor, das die Werte "start", "middle", "end" oder "inherit" annehmen kann, entscheidet, in welche Richtung der Text von diesem Punkt aus fließt. Das Attribut dominant-baseline entscheidet über die vertikale Ausrichtung.

Wie bei den Formen-Elementen kann Text mit dem fill-Attribut gefärbt und mit dem stroke-Attribut umrandet werden. Beide können sich auch auf Verläufe oder Muster beziehen, was die Farbgebung von Text in SVG sehr leistungsfähig macht.

Schriftarteigenschaften festlegen

Ein wesentlicher Teil eines Textes ist die Schriftart, in der er angezeigt wird. SVG bietet eine Reihe von Attributen, die viele Ähnlichkeiten mit ihren CSS-Pendants haben, um die Auswahl der Schriftart zu ermöglichen. Jedes der folgenden Eigenschaften kann als Attribut oder über eine CSS-Deklaration gesetzt werden: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, letter-spacing, word-spacing und text-decoration.

Weitere textbezogene Elemente

tspan

Dieses Element wird verwendet, um Teilbereiche eines größeren Textes zu kennzeichnen. Es muss ein Kind eines text-Elements oder eines anderen tspan-Elements sein. Ein typisches Anwendungsbeispiel ist, ein Wort eines Satzes fett rot zu malen.

<svg width="350" height="60" xmlns="http://www.w3.org/2000/svg">
  <text>
    This is
    <tspan font-weight="bold" fill="red">bold and red</tspan>
  </text>

  <style>
    <![CDATA[
      text {
        dominant-baseline: hanging;
        font: 28px Verdana, Helvetica, Arial, sans-serif;
      }
    ]]>
  </style>
</svg>

Das tspan-Element hat die folgenden benutzerdefinierten Attribute:

x

Legt eine neue absolute x-Koordinate für den enthaltenen Text fest. Dies überschreibt die standardmäßige aktuelle Textposition. Das Attribut kann auch eine Liste von Zahlen enthalten, die nacheinander auf die einzelnen Zeichen des tspan-Elements angewendet werden.

dx

Beginnt das Zeichnen des Textes mit einem horizontalen Offset dx von der standardmäßigen aktuellen Position. Auch hier können Sie eine Liste von Werten angeben, die auf aufeinanderfolgende Zeichen angewendet werden, wodurch sich der Offset im Laufe der Zeit anhäuft.

Ebenso gibt es y und dy für vertikale Verschiebung.

rotate

Dreht alle Zeichen um diesen Grad. Eine Liste von Zahlen lässt jedes Zeichen zu seinem jeweiligen Wert drehen, wobei verbleibende Zeichen entsprechend dem letzten Wert gedreht werden.

textLength

Gibt die berechnete Länge der Zeichenkette an. Dies ist ein eher obskures Attribut und dient dazu, der Rendering-Engine zu ermöglichen, die Position der Glyphen fein abzustimmen, wenn die eigene gemessene Textlänge nicht mit der hier angegebenen übereinstimmt.

textPath

Dieses Element greift über sein href-Attribut auf einen beliebigen Pfad zu und richtet die Zeichen, die es umschließt, entlang dieses Pfades aus:

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" />
  <text>
    <textPath href="#my_path">A curve.</textPath>
  </text>

  <style>
    <![CDATA[
      text {
        dominant-baseline: hanging;
        font: 28px Verdana, Helvetica, Arial, sans-serif;
      }
    ]]>
  </style>
</svg>

• Zurück
• Weiter