startOffset
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
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:
Beispiel
<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 und100%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
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # TextPathElementStartOffsetAttribute |