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.

Only one element is using this attribute: <textPath>

<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 and 100% 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

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
startOffsetChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support
Full support