CSS text-anchor Property

The text-anchor property controls how SVG text is positioned relative to the text element’s specified anchor point (for example the x/y coordinates on a element). Instead of changing where the anchor point itself sits in the document, it changes how the glyphs are rendered around that anchor: the entire string (or each positioned chunk) is shifted so that a particular edge or center of its rendered glyph box aligns with the anchor. This property is applied to text-level elements in SVG (including and ) and affects layout at the glyph/geometry level rather than at the block-box level used by typical HTML flow layout.

Because it operates on glyph metrics and the current user coordinate system, text-anchor interacts closely with transformations, rotations, and explicit positioning. If an element has transforms applied (or is placed along a rotated path), the alignment behavior is resolved in the transformed coordinate space, so the visual relationship between anchor point and drawn text follows whatever transforms are in effect. When you use multiple x positions or nested elements, each positioned segment can be aligned independently, which lets you create complex label arrangements where parts of a label are anchored differently relative to their own coordinates.

The visual baseline and writing direction also affect how anchor placement appears, so text-anchor is often used together with baseline and writing-mode controls to achieve predictable results. For baseline alignment concerns, consider how dominant-baseline influences the vertical reference for glyph placement, and for horizontal orientation or line progression you may need to account for writing-mode. If you’re coming from HTML text layout, note that this property is distinct from how block or inline content is aligned in CSS; it serves a different purpose than text-align.

In practice, designers and developers use text-anchor to place labels and annotations precisely (for example centering chart labels, aligning tick labels to marks, or offsetting labels on icons) without altering the element’s coordinate. For predictable results, pair it with explicit positioning attributes and be mindful of transforms: if you rotate or translate the text container via transform, the anchoring will follow the transformed coordinate system. Because it works with glyph geometry rather than box-model rules, small differences in font metrics, letter spacing, or complex scripts can affect final placement, so test with your actual fonts and scripts when precise alignment matters.