SVG/Tutorials/Text/animierte Textpfade
Informationen zu diesem Text
- Lesedauer
- 20min
- Schwierigkeitsgrad
- einfach
- Vorausgesetztes Wissen
- Grundkenntnisse in
• SVG
Sie können mit SVG mit Hilfe des textPath-Elements sehr einfach Text entlang von Pfaden führen. Dieser Text kann durch eine Verschiebung des Startpunkts zum Lauftext animiert werden.
Inhaltsverzeichnis
Animation von startOffset[Bearbeiten]
Mit startoffset können Sie die Start-Position des Textes an einem Text-Pfad bestimmen und auch mit SMIL animieren. Dies funktioniert in allen Browsern außer dem Internet Explorer 9-11.
<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="-375" to="175"
dur="5s"
repeatCount="indefinite"/>
</textPath>
</text>
Rotation mit transform[Bearbeiten]
In diesem Beispiel wird der Text durch eine SVG/Transformation rotiert. Dies hat den Vorteil, dass der Übergang zwischen den Animationen glatt verläuft.
<use href="#kreis" x="10" y="62"/>
<g transform="translate(10, 62)">
<text x="0" y="0" >
<animateTransform
attributeName="transform"
type="rotate"
from="0 92 92"
to="360 92 92 "
dur="5"
repeatCount="indefinite"
/>
<textPath class="schreib" href="#kreis" fill="var(--yellow);" >
erfolgreich online seit 1995!
</textPath>
</text>
</g>
kreis wird als use aufgerufen und dargestellt.
Das textPath-Element referenzieren diesen Pfad ebenfalls und wird so kreisförmig dargestellt.
Anders als im ersten Beispiel wird nicht die startOffset-Eigenschaft animiert, sondern der gesamte Textpfad mit seinem Elternelement text transformiert.
Mit dem animateTransform-Element wird der Text gedreht. Die 3 Werte im from- und to-Attribut geben Winkelmaß und Mittelpunkt der Drehung an.
Shape-Morphing eines Textpfades[Bearbeiten]
Nicht nur der Text entlang des Pfades, sondern auch der Pfad selbst kann mit SMIL animiert werden:
<path id="route" d="M50,200 q100,-100 200,0 t200,0 t200,0 t200,0">
<animate attributeName="d"
values="M50,200 q100,-100 200,0 t200,0 t200,0 t200,0;
M50,200 q100,-50 200,0 t200,0 t200,0 t200,0;
M50,200 q100,-100 200,0 t200,0 t200,0 t200,0"
begin="button1.click"
dur="2s"
repeatCount="indefinite"
/>
</path>
<text>
<textPath id="offset" href="#route" startOffset="20">
Berg
<tspan style="fill:red"> und</tspan>
Talfahrt!
<animate
attributeName="startOffset"
values="20; -20; 400; 80; 800; 390; 20"
dur="9s"
begin="button3.click"
repeatCount="indefinite"
/>
</textPath>
<animate
attributeName="font-size"
values="12px;48px;12px"
dur="4s"
begin="button2.click"
repeatCount="indefinite"
/>
</text>
Der Pfad mit der id route stellt eine regelmäßige Wellenlinie dar und dient auch als Referenzpunkt für den textPath. Bei einem Klick auf den ersten Button wird mit animate das d-Attribut mit den Pfad-Kommandos animiert.
Das text-Element enthält ebenfalls eine Animation, die die Schriftgröße animiert. Im textPath-Element wird das startOffset-Attribut animiert. Im values-Attribut sind die Werte nicht gleichmäßig fortlaufend, sodass es wirkt, als ob die Schrift für den Berg Anlauf nimmt. Die unterschiedliche Dauer der Animationen sorgt dafür, dass die Effekte zufällig wirken.
Text und Pfad erscheinen gleichzeitig[Bearbeiten]
In den vorherigen Beispielen wurde der Textpfad jeweils sichtbar gemacht. Eine Alternative wäre es, den Textpfad nicht anzuzeigen, oder erst mit dem erscheinenden Text sichtbar zu machen.
In diesem Tutorial fliegen die Überschriften von links und rechts ein:
- tympanus.net: Animating SVG Text on a Path
- Terraforming (Demo)
Für das Einfliegen beim Herunterscrollen wird das scroll-Event benutzt.
In Chrome-Browsern werden Filter-Effekte animiert, die den Text erst verschwommen und dann scharf fokussiert anzeigen.
Weblinks[Bearbeiten]
- animated clipped textPath (mbostok) (mit D3.js)
- Text along a path (Joni Bologna)
- Tavmjong Bah: Text on a Path (or Text Warping)
interessante Effekte mit Inkscape
kurveundkreisdefiniert.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()".