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.
Only one element is using this attribute: <textPath>
html,body,svg { height:100% }
<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 | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of 'startOffset' in that specification. |
Candidate Recommendation | No change |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'startOffset' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
startOffset | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support