Texte

Wir haben im Einführungsbeispiel gesehen, dass das text-Element verwendet werden kann, um beliebigen Text in SVG-Dokumente einzufügen:

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

Die Attribute x und y bestimmen, wo im Ansichtsfenster der Text erscheint. Das Attribut text-anchor, das die Werte "start", "middle", "end" oder "inherit" haben 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 Formelementen kann Text mit dem fill-Attribut koloriert und mit dem stroke-Attribut umrandet werden. Beide können auch auf Verläufe oder Muster verweisen, was das Kolorieren von Text in SVG sehr leistungsfähig macht.

Ein wesentlicher Bestandteil eines Textes ist die Schriftart, in der er dargestellt wird. SVG bietet eine Reihe von Attributen, von denen viele ihren CSS-Gegenstücken ähneln, um die Auswahl der Schriftart zu ermöglichen. Jedes der folgenden Eigenschaften kann als Attribut oder über eine CSS-Deklaration festgelegt werden: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, letter-spacing, word-spacing und text-decoration.

Dieses Element wird verwendet, um Teilabschnitte eines größeren Textes zu markieren. Es muss ein Kind eines text-Elements oder eines anderen tspan-Elements sein. Ein typischer Anwendungsfall ist, ein Wort eines Satzes fett rot zu färben.

<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 folgende benutzerdefinierte Attribute:

x

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

dx

Beginnt die Texterstellung mit einem horizontalen dx-Versatz von der Standardposition. Auch hier können Sie eine Liste von Werten angeben, die auf aufeinanderfolgende Zeichen angewendet werden, wodurch sich der Versatz im Laufe der Zeit summiert.

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

rotate

Dreht alle Zeichen um diesen Grad. Eine Liste von Zahlen bewirkt, dass jedes Zeichen zu seinem jeweiligen Wert rotiert, wobei verbleibende Zeichen gemäß dem letzten Wert rotieren.

textLength

Gibt die berechnete Länge der Zeichenfolge an. Dies ist ein eher unbekanntes Attribut und soll der Rendering-Engine ermöglichen, die Positionen der Glyphen fein abzustimmen, wenn die vom Render-Engine gemessene Textlänge nicht mit der hier angegebenen übereinstimmt.

Dieses Element holt über sein href-Attribut einen beliebigen Pfad und richtet die Zeichen, die es umkreist, entlang dieses Pfads 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 xmlns:xlink="http://www.w3.org/1999/xlink" 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