SVG/Tutorials/Text/animierte Textpfade

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

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.

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: Positionierung
  • dx,dy: Positionierung
  • lengthAdjust: ob nur Zeichenabstand oder auch Zeichen angepasst werden sollen
  • textLength: Länge des Texts
  • href: Verlinkung auf den Pfad, an dem der Text ausgerichtet werden soll.
  • path: Direkte Pfadangabe im textPath-Element, statt mit href auf einen Pfad zu verweisen (nur im Firefox-Browser, hat Vorrang vor einer href Angabe)
  • startOffset: Verschiebung der Start-Position
  • method: Rendering des Textpfads
  • spacing: Setzen von Zeichenabständen
  • side: legt die Seite fest, auf der der Text dargestellt wird
    • left: Standardwert
    • right
Text entlang von Pfaden ansehen …
<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>

Die Textpfade bestehen aus dem Text, der auf den vom id referenzierten Pfad gelegt wird.
Der obere Pfad wird von 2 Texten benutzt; der rechte Text bekommt mit startOffset="600" eine andere Position.

Verschiebung der Start-Position

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

Mit startoffset können Sie die Start-Position des Textes an einem Text-Pfad bestimmen und auch mit SMIL animieren.


Achtung!

Nutzer des Firefox können SMIL im Frickl nicht ausprobieren, da die animate-Elemente nicht gerendert werden.
Öffnen Sie das Beispiel mit einem Klick auf Vorschau in einem neuen Tab!
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

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

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

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.

Siehe auch

Weblinks

Abgerufen am 18.06.2025
von "http://wiki.selfhtml.org/wiki/SVG/Tutorials/Text/animierte_Textpfade"