How do I set SVG textPath startOffset?

Paste text already on a path, set Offset (0–90%), and click Set offset. startOffset="N%" is written on every . Add textPath first if the string is still a plain .

Does startOffset move the path itself?

No. The path d stays. Only where the glyph run begins along that path changes. x/y on the parent text are ignored while textPath is in effect.

How is startOffset different from adding a textPath?

Add textPath creates the wrapper. This page assumes the wrapper exists and only writes startOffset. Convert textPath to text removes the wrapper.

Why percent instead of a length?

Percent is along the path’s total length, so 0 sits at the start and 50 at the midpoint regardless of viewBox scale. A second click with the same Offset is a no-op.

Set SVG textPath startOffset — Free Tool

FAQ

Quick answers

How do I set SVG textPath startOffset?: Paste text already on a path, set Offset (0–90%), and click Set offset. startOffset="N%" is written on every <textPath>. Add textPath first if the string is still a plain <text>.
Does startOffset move the path itself?: No. The path d stays. Only where the glyph run begins along that path changes. x/y on the parent text are ignored while textPath is in effect.
How is startOffset different from adding a textPath?: Add textPath creates the <textPath href> wrapper. This page assumes the wrapper exists and only writes startOffset. Convert textPath to text removes the wrapper.
Why percent instead of a length?: Percent is along the path’s total length, so 0 sits at the start and 50 at the midpoint regardless of viewBox scale. A second click with the same Offset is a no-op.

Add textPath → textPath → text → Text to path → Set text-anchor →

Privacy Terms

Source

Offset

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Set SVG textPath startOffset

Live preview