SVG text-anchor Attribute

The text-anchor attribute is used to align a text which is auto-wrapped or pre-formatted. The wrapping area is decided from the inline-size property with respect to a given point. In case of multiple line text, the alignment is made for each line. It has effect only on the following elements <altGlyph>, <text>, <textPath>, <tref>, and <tspan>

Syntax:

text-anchor = start | middle | end

Attribute Values: The text-anchor attribute accepts the values mentioned above and described below:

• start: With this attribute value, characters are aligned such that the start of the text string is at the initial current text position.
• middle: With this attribute value, characters are aligned such that the middle of the text string is at the current text position.
• end: With this attribute value, characters are shifted such that the end of the resulting rendered text is at the initial current text position.

Example 1: Below examples illustrates the use of text-anchor attribute.

Output:

Example 2:

Output:

Example 3:

Output: