startOffset

Baseline Widely available

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

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

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

<textPath>

Beispiel

html,
body,
svg {
  height: 100%;
}

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 stellt der Startversatz eine prozentuale Distanz entlang des gesamten Pfads dar. So bedeutet 0% der Anfangspunkt des Pfads und 100% das Endpunkt des Pfads.

<number>

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

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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # TextPathElementStartOffsetAttribute

Browser-Kompatibilität

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden