SVG/Elemente/Text/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
• d: Pfadangabe, die den Textverlauf beschreibt
• href: Verlinkung auf einen Pfad. (Wenn ein d-Attribut vorhanden ist, wird diese Referenz ignoriert.)
• 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

Anwendungsbeispiel

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

ansehen …

Textpfad-Eigenschaften

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

• 
• 
• 
• 
• 
• 

Animation 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="-400" to="600"
            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()".

ansehen …

Empfehlung:
Der Internet Explorer 9-11 unterstützt SMIL-Animationen nicht. Deshalb wäre hier eine Umsetzung mit CSS-animation empfehlenswert.

Hauptartikel: SVG/Tutorials/SVG mit CSS animieren#Laufende Linien

Setzen von Zeichenabständen

Mit der Eigenschaft spacing können Sie festlegen, wie die Zeichen und Zeichenabstände gerendert werden sollen.

Folgende Angaben sind möglich:

• exact: (Standardwert) folgt den exakten Regeln der SVG-Spezifikation zum Verhalten von Text an Pfaden
• auto: benutzt einen speziellen Text-an-Pfaden-Algorithmus, um die Zeichen korrekt zu setzen

Dieses Attribut ist besonders bei kursiven oder Schreibschriften wichtig, damit bei einer Streckung des Texts nicht der Schreibfluss unterbrochen wird

Rendering des Textpfads

Mit der Eigenschaft method können Sie bestimmen, wie die Zeichen entlang des Textpfads gerendert werden sollen.

Folgende Angaben sind möglich:

• align (Standardwert) Zeichen werden durch Transformationen, wie Translationen oder Rotationen, ausgerichtet.
• stretch wandelt alle Zeichen in Pfade um, passt die Punkte dieser Pfade an die Vektoren des Textpfades an und skaliert die Textzeichen dementsprechend
  Diese Methode erlaubt bessere Ergebnisse bei Schreibschriften, da durch die Biegungen der Kurve ein Auseinanderreißen der Buchstabenverbindungen korrigiert werden kann.

Weblinks

• W3C: TextPathElement

Siehe auch

• SVG/Tutorials/Text/animierte Textpfade
• SVG/Tutorials/SVG mit CSS animieren: Laufende Linien