SVG/Elemente/Text/textPath

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

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.

  • SVG 1.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

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

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.

Textpfad-Eigenschaften[Bearbeiten]

Verschiebung der Start-Position[Bearbeiten]

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.

  • SVG 1.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

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

  • SVG 1.0
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
Beispiel ansehen …
<svg viewbox="0 0 800 500">
  <text>
    <textPath class="schreib" xlink:href="#eins" 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="#eins">
      ... 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="#vier" fill="#dfac20" startOffset="60">
      erfolgreich online seit 1995!
      <animate attributeName="startOffset" from="-375" to="175" begin="0s" dur="5s" />
    </textPath>	
  </text>
</svg>
In diesen Beispielen wurden die startOffset-Werte animiert. 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()".
Empfehlung:
Der Internet Explorer unterstützt SMIL-Animationen nicht. Deshalb wäre hier eine Umsetzung mit CSS-animation empfehlenswert.

Setzen von Zeichenabständen[Bearbeiten]

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

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

Siehe auch[Bearbeiten]

Referenz[Bearbeiten]