text-anchor

« SVG Attribute reference home

The text-anchor attribute is used to align (start-, middle- or end-alignment) a string of text relative to a given point.

The text-anchor attribute is applied to each individual text chunk within a given <text> element. Each text chunk has an initial current text position, which represents the point in the user coordinate system resulting from (depending on context) application of the x and y attributes on the <text> element, any x or y attribute values on a <tspan>, <tref> or <altglyph> element assigned explicitly to the first rendered character in a text chunk, or determination of the initial current text position for a <textpath> element.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet.

Usage context

start

The rendered characters are aligned such that the start of the text string is at the initial current text position. For Latin in its usual orientation this is equivalent to left alignment. For scripts that are inherently right to left such as Hebrew and Arabic, this is equivalent to right alignment. For Asian text with a vertical primary text direction, this is comparable to top alignment.

middle

The rendered characters are aligned such that the middle of the text string is at the current text position. (For text on a path, conceptually the text string is first laid out in a straight line. The midpoint between the start of the text string and the end of the text string is determined. Then, the text string is mapped onto the path with this midpoint placed at the current text position.)

end

The rendered characters are aligned such that the end of the text string is at the initial current text position.For Latin in its usual orientation this is equivalent to right alignment. For scripts that are inherently right to left such as Hebrew and Arabic, this is equivalent to left alignment.

Example

<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
     xmlns="https://www.w3.org/2000/svg" version="1.1">

    <!-- Materialisation of anchors -->
    <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" />
    
    
    <!-- Anchors in action -->
    <text text-anchor="start"
          x="60" y="40">A</text>

    <text text-anchor="middle"
          x="60" y="75">A</text>

    <text text-anchor="end"
          x="60" y="110">A</text>

    <!-- Materialisation of anchors -->
    <circle cx="60" cy="40" r="3" fill="red" />
    <circle cx="60" cy="75" r="3" fill="red" />
    <circle cx="60" cy="110" r="3" fill="red" />

<style><![CDATA[
text{
    font: bold 36px Verdana, Helvetica, Arial, sans-serif;
}
]]></style>
</svg>

Live sample

Elements

The following elements can use the text-anchor attribute

• Text content elements »