startOffset

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das startOffset-Attribut definiert einen Versatz vom Start des Pfades für die anfängliche aktuelle Textposition entlang des Pfades, nachdem der Pfad auf das Koordinatensystem des <textPath>-Elements umgewandelt wurde.

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

Beispiel

html
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <path
    id="path1"
    fill="none"
    stroke="red"
    d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <path
    id="path2"
    fill="none"
    stroke="red"
    d="M130,90 Q210,90 210,45 Q210,10 170,10 Q130,10 130,40 Q130,70 165,70 Q190,70 195,50" />

  <text>
    <textPath href="#path1" startOffset="0">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>

  <text>
    <textPath href="#path2" startOffset="40">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>

Nutzungshinweise

Wert <length-percentage> | <number>
Standardwert 0
Animierbar Ja
<length-percentage>

Eine Länge stellt eine Distanz entlang des Pfades dar, die im aktuellen Benutzerkoordinatensystem des <textPath>-Elements gemessen wird.

Wenn ein Prozentsatz angegeben ist, dann repräsentiert der Startversatz einen prozentualen Abstand entlang des gesamten Pfades. Somit gibt 0% den Startpunkt des Pfades und 100% den Endpunkt des Pfades an.

<number>

Dieser Wert gibt eine Entfernung entlang des Pfades an, gemessen im aktuellen Benutzerkoordinatensystem für das <textPath>-Element.

Hinweis: Negative Werte und Werte, die größer als die Pfadlänge sind (z.B. 150%), sind erlaubt.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# TextPathElementStartOffsetAttribute

Browser-Kompatibilität