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 und diese auch mit SMIL animieren. Dies funktioniert in allen Browsern außer dem Internet Explorer 9-11. Eine zeitgemäßere Animation mit offset-path wird im Safari noch nicht unterstützt.
Inhaltsverzeichnis
Animation von startOffset[Bearbeiten]
<svg viewbox="0 0 800 500">
<text>
<textPath class="schreib" xlink: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" xlink:href="#kurve">
... immer an der Wand lang!
<animate attributeName="startOffset" from="-500" to="600" begin="0s" dur="5s" fill="freeze"/>
</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="#kreis" fill="#dfac20" startOffset="60">
erfolgreich online seit 1995!
<animate attributeName="startOffset" from="-375" to="175" begin="0s" dur="5s" repeatCount="indefinite"/>
</textPath>
</text>
</svg>
Animation 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 xlink: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 "
begin="0"
dur="5"
repeatCount="indefinite"
/>
<textPath class="schreib" xlink:href="#kreis" fill="#dfac20" >
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.
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.
Weblinks[Bearbeiten]
- animated clipped textPath (mbostok)
- Text along a path (Joni Bologna)]
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()".