SVG/Anwendung und Praxis/animierte Textpfade

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

Inhaltsverzeichnis

[Bearbeiten] Animation von startOffset

  • SVG 1.0
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
Beispiel ansehen …
<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>
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()".

[Bearbeiten] Animation 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.

  • SVG 1.0
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
Beispiel ansehen …
  <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>
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.

[Bearbeiten] 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.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML