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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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