Why does the SVG tspan y attribute alter the horizontal alignment of text?

Question

HTML:

<svg>
    <g transform="translate(100, 100)">
        <circle r="3"></circle>
        <text text-anchor="middle">
            Test<tspan y="2">xxxxxxxxxxxxxx</tspan>
        </text>
    </g>
</svg>

The x's overlap with Test. I do not see why this is happening. If I remove the text-anchor attribute it does not happen.

Demo: http://jsfiddle.net/dvt4nv94/2/

Answer 1

specifying an x or y attribute makes the tspan be absolutely positioned so it is as if it exists on its own rather than as a part of the <text> container.

setting dy="2" rather than y="2" will achieve the effect you want.