Texte

Im Einführungsbeispiel haben wir 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 Viewport 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 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 sich auch auf Verläufe oder Muster beziehen, was das einfache Einfärben von Text in SVG im Vergleich zu CSS 2.1 sehr leistungsfähig macht.

Ein wesentlicher Bestandteil eines Textes ist die Schrift, in der er angezeigt wird. SVG bietet eine Reihe von Attributen, die vielen ihrer CSS-Gegenstücke ähneln, um die Schriftauswahl 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.

Dieses Element wird verwendet, um Teilbereiche 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 spezielle Attribute:

• x

  • : Setzt eine neue absolute x-Koordinate für den enthaltenen Text. 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 mit dem Zeichnen des Textes mit einem horizontalen Offset dx von der standardmäßigen aktuellen Position aus. Auch hier können Sie eine Liste von Werten bereitstellen, die auf aufeinanderfolgende Zeichen angewendet werden und so den Offset im Laufe der Zeit aufbauen.

  In ähnlicher Weise gibt es y und dy für die vertikale Verschiebung.

• rotate

  • : Rotiert alle Zeichen um diesen Grad. Eine Liste von Zahlen bewirkt, dass jedes Zeichen auf seinen jeweiligen Wert rotiert wird, wobei verbleibende Zeichen gemäß dem letzten Wert rotieren.

• textLength

  • : Gibt die berechnete Länge der Zeichenkette an. Dies ist ein eher undurchsichtiges Attribut und soll der Rendering-Engine ermöglichen, die Positionen der Glyphen fein abzustimmen, wenn ihre eigene gemessene Textlänge nicht mit der hier angegebenen übereinstimmt.

Dieses Element ruft über sein href-Attribut einen beliebigen Pfad ab und richtet die Zeichen, die es umgibt, 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 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