Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

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 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.

Animation von startOffset[Bearbeiten]

  • Chrome
  • Edge
  • Firefox
  • 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()".

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.


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.

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]