SVG/Tutorials/Text/animierte Textpfade

Aus SELFHTML-Wiki
< SVG‎ | Tutorials‎ | Text
Wechseln zu: Navigation, Suche

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.

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.

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari
Lauftext mit SMIL ansehen …
  <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>
Es werden 2 Pfade mit den ids 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()".
Beachten Sie: Da startoffset (noch) kein Präsentationsattribut ist, kann es nicht mit CSS-animations animiert werden.

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.


Beispiel ansehen …
  <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>
Der Pfad mit der id 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.

Beachten Sie: Vergessen Sie nicht, das attributeName-Attribut mit dem Wert transform zu setzen.

Shape-Morphing eines Textpfades[Bearbeiten]

Nicht nur der Text entlang des Pfades, sondern auch der Pfad selbst kann mit SMIL animiert werden:

Berg- und Talfahrt ansehen …
<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:

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]