startOffset

Baseline Widely available

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

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

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

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 Pfads dar, gemessen im aktuellen Benutzerkoordinatensystem für das <textPath>-Element.

Wenn ein Prozentsatz angegeben wird, dann repräsentiert der Startversatz eine prozentuale Entfernung entlang des gesamten Pfades. Folglich 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 länger sind als die Pfadlänge (z.B. 150%), sind erlaubt.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# TextPathElementStartOffsetAttribute

Browser-Kompatibilität

BCD tables only load in the browser