HTML Guide for g
The text-anchor attribute is used within SVG elements like text or textPath to specify the alignment of text relative to a given point, but it’s not allowed on g container elements.
Here’s an example of how you can correctly use the text-anchor attribute on a <text> element in SVG:
<svg width="200" height="200">
<text x="100" y="100" text-anchor="middle">Centered text</text>
</svg>
In this example:
- The text-anchor="middle" attribute is applied directly to the <text> element.
- It aligns the text in the middle horizontally around the specified x-coordinate.
You can use the text-anchor element with the SVG elements text, textPath, tref or tspan.
The allowed values for the text-anchor attribute are start, middle or end. The value none is not valid for this attribute.