How do I set SVG text-anchor?

Choose start, middle, or end and click Set text-anchor. The value is written on every and , including style attributes.

Does text-anchor move the x/y attributes?

No. x and y stay. The glyph origin is interpreted differently around that point — middle centers the run on x, end hangs it to the left of x.

How is text-anchor different from aligning the SVG to the center?

Align to center translates painted geometry on X. text-anchor only changes how a text run sits on its own x. Paths and shapes are not moved.

What do start, middle, and end do?

Start (the SVG default) draws the run to the right of x. Middle centers it on x. End draws it to the left of x. That is the SVG attribute, not CSS text-align.

Set SVG text-anchor — Free Tool

FAQ

Quick answers

How do I set SVG text-anchor?: Choose start, middle, or end and click Set text-anchor. The value is written on every <text> and <tspan>, including style attributes.
Does text-anchor move the x/y attributes?: No. x and y stay. The glyph origin is interpreted differently around that point — middle centers the run on x, end hangs it to the left of x.
How is text-anchor different from aligning the SVG to the center?: Align to center translates painted geometry on X. text-anchor only changes how a text run sits on its own x. Paths and shapes are not moved.
What do start, middle, and end do?: Start (the SVG default) draws the run to the right of x. Middle centers it on x. End draws it to the left of x. That is the SVG attribute, not CSS text-align.

Split text into glyphs → Tspan → text → Set dominant-baseline → Set letter-spacing →

Privacy Terms

Source

Anchor

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Set SVG text-anchor

Live preview