SVG/Elemente/Text/textPath
Mit dem textPath-Element können Sie Text entlang eines Pfades ausrichten. Dabei werden die Positionen und Rotationen der einzelnen Zeichen automatisch berechnet.
Das textPath-Element muss innerhalb eines text
-Elements verschachtelt sein und eine ID mit einer Referenz auf den Pfad aufweisen.
Folgende Angaben sind möglich:
x,y
: Positionierungdx,dy
: PositionierunglengthAdjust
: ob nur Zeichenabstand oder auch Zeichen angepasst werden sollentextLength
: Länge des Textsd
: Pfadangabe, die den Textverlauf beschreibthref
: Verlinkung auf einen Pfad. (Wenn ein d-Attribut vorhanden ist, wird diese Referenz ignoriert.)startOffset
: Verschiebung der Start-Positionmethod
: Rendering des Textpfadsspacing
: Setzen von Zeichenabständenside
: legt die Seite fest, auf der der Text dargestellt wirdleft
: Standardwertright
Inhaltsverzeichnis
Anwendungsbeispiel[Bearbeiten]
<svg viewbox="0 0 800 500">
<path id="eins" d="M20,140
h100
a100,100 0 0,0 70,-50
a100,100 0 0,1 70,-50
h470
a50,50 1 0,1 50,50
v200"/>
<path id="zwei" d="M20,180
h100
c200,20 300,300 350,200"/>
<path id="drei" d="M600,280
h75 l50,50 v75 l-50,50 h-75 l-50,-50 v-75z"/>
<path id="vier" d="M140,440
a 90,90 1 1,1 50,0"/>
<text>
<textPath class="schreib" xlink:href="#eins">
Es geht langsam aufwärts...
</textPath>
<textPath class="schreib" xlink:href="#zwei">
... und jetzt steil nach unten!
</textPath>
<textPath class="schreib" xlink:href="#eins">
... immer an der Wand lang!
</textPath>
<textPath class="achteck" xlink:href="#drei" method="align">
Ein Textpfad muss nicht immer eine Kurve sein!
</textPath>
</text>
<text>
<tspan class="h1" x="170" y="345" text-anchor="middle">SELF</tspan>
<tspan class="h1" x="170" y="390" text-anchor="middle">HTML</tspan>
<textPath class="schreib" xlink:href="#vier" fill="#dfac20" startOffset="60">
erfolgreich online seit 1995!
</textPath>
</text>
</svg>
Textpfad-Eigenschaften[Bearbeiten]
Verschiebung der Start-Position[Bearbeiten]
Mit der Eigenschaft startOffset können Sie die Startposition vom Anfang des Pfades an eine gewünschte Stelle verschieben. Dies ist besonders bei Animationen, bei denen der Text am Bildrand erscheinen soll, interessant.
Folgende Angaben sind nötig:
Längenangabe
: positive oder negative Zahl oder eines Prozentwertes.
0 entspricht dem Anfang des Pfades, 100% dem Ende.
Animation von startOffset[Bearbeiten]
<text>
<textPath class="schreib" href="#kurve" startOffset="-500">
Es geht langsam aufwärts...
<animate
attributeName="startOffset"
from="-500" to="10"
begin="3s" dur="3s"
fill="freeze"/>
</textPath>
<textPath class="schreib" href="#kurve">
... immer an der Wand lang!
<animate
attributeName="startOffset"
from="-500" to="600"
dur="5s"
fill="freeze"/>
</textPath>
</text>
<text>
<tspan role="heading" x="170" y="345">SELF</tspan>
<tspan role="heading" x="170" y="390">HTML</tspan>
<textPath class="schreib" href="#kreis" fill="var(--yellow)" startOffset="60">
erfolgreich online seit 1995!
<animate
attributeName="startOffset"
from="-400" to="600"
dur="5s"
repeatCount="indefinite"/>
</textPath>
</text>
kurve
und kreis
definiert.
Die textPath-Elemente referenzieren diese Pfade und folgen so derem Verlauf.
In diesen Beispielen wurde das startOffset-Attribut mit dem animate-Element animiert. Da das startOffset-Attribut zu Beginn einen negativen Wert hat, startet der Text im nicht sichtbaren Bereich außerhalb des Pfades und fließt mit Beginn der Animation in den sichtbaren Bereich.
Das untere Beispiel erfüllt nicht die Erwartungen, da die Animation nicht ganz rund läuft - der Text verschwindet und erscheint erst dann wieder neu. Besser wäre hier eine Rotation des Textpfades mit transform="rotate()".
Der Internet Explorer 9-11 unterstützt SMIL-Animationen nicht. Deshalb wäre hier eine Umsetzung mit CSS-animation empfehlenswert.
Setzen von Zeichenabständen[Bearbeiten]
Mit der Eigenschaft spacing können Sie festlegen, wie die Zeichen und Zeichenabstände gerendert werden sollen.
Folgende Angaben sind möglich:
exact
: (Standardwert) folgt den exakten Regeln der SVG-Spezifikation zum Verhalten von Text an Pfadenauto
: benutzt einen speziellen Text-an-Pfaden-Algorithmus, um die Zeichen korrekt zu setzen
Dieses Attribut ist besonders bei kursiven oder Schreibschriften wichtig, damit bei einer Streckung des Texts nicht der Schreibfluss unterbrochen wird
Rendering des Textpfads[Bearbeiten]
Mit der Eigenschaft method können Sie bestimmen, wie die Zeichen entlang des Textpfads gerendert werden sollen.
Folgende Angaben sind möglich:
align
(Standardwert) Zeichen werden durch Transformationen, wie Translationen oder Rotationen, ausgerichtet.stretch
wandelt alle Zeichen in Pfade um, passt die Punkte dieser Pfade an die Vektoren des Textpfades an und skaliert die Textzeichen dementsprechend
Diese Methode erlaubt bessere Ergebnisse bei Schreibschriften, da durch die Biegungen der Kurve ein Auseinanderreißen der Buchstabenverbindungen korrigiert werden kann.
Weblinks[Bearbeiten]
- W3C: TextPathElement
Der obere Pfad wird von 2 Texten benutzt; der rechte Text bekommt mit
startOffset="600"
eine andere Position.