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

BCD tables only load in the browser