startOffset

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

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

Update compatibility data on GitHub
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 ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown