SVG textPath startOffset Attribute
startOffset controls exactly where along a referenced path curved text begins, letting you position text precisely along any curve.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Controlling Text Start Position Along a Path
The startOffset attribute on a <textPath> element specifies how far along the referenced path's total length the text should begin, accepting either an absolute length value or a percentage of the path's total length, giving precise control over where curved text starts rather than always beginning at the path's very start point.
- Specifies how far along the path's length the text should begin rendering
- Accepts either an absolute length value or a percentage of total path length
- Gives precise control over text starting position rather than always the path's start
Practical Uses for Adjustable Start Offset
startOffset is particularly useful for centering text along a circular badge path (offsetting to position the text's midpoint at the top of the circle), or for reusing the same underlying curved path with multiple different text elements each starting at a different offset position around that shared curve.
- Useful for centering text along a circular badge path at a specific point
- Enables reusing one curved path with multiple text elements at different offsets
- Allows fine control over exactly where curved text visually begins
Frequently Asked Questions
Can startOffset be animated for a scrolling curved text effect?
Yes, animating the startOffset value via CSS or SMIL creates a scrolling text effect that moves along the curved path continuously, a popular technique for circular badge or seal-style animated text.
How do I calculate the percentage needed to center text on a circular path?
Centering typically requires calculating the text's own rendered length relative to the circle's circumference, then setting startOffset to position the text's midpoint at the desired location, often requiring some trial adjustment or JavaScript measurement for precision.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG