startOffset
The startOffset
attribute defines an offset from the start of the path for the initial current text position along the path after converting the path to the <textPath>
element's coordinate system.
You can use this attribute with the following SVG elements:
Example
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>
Usage notes
Value |
<length-percentage> |
<number>
|
---|---|
Default value | 0 |
Animatable | Yes |
<length-percentage>
-
A length represents a distance along the path measured in the current user coordinate system for the
<textPath>
element.If a percentage is given, then the start offset represents a percentage distance along the entire path. Thus,
0%
indicates the start point of the path and100%
indicates the end point of the path. <number>
-
This value indicates a distance along the path measured in the current user coordinate system for the
<textPath>
element.
Note: Negative values and values larger than the path length (e.g. 150%
) are allowed.
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # TextPathElementStartOffsetAttribute |
Browser compatibility
BCD tables only load in the browser