Почему атрибут SVG tspan y изменяет горизонтальное выравнивание текста?

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>

xПересекается с Test, Я не понимаю, почему это происходит. Если я удалю text-anchor Атрибут этого не происходит.

Демо: http://jsfiddle.net/dvt4nv94/2/

Answer 1

Указание атрибута x или y делает tspan абсолютно позиционированным, как если бы он существовал сам по себе, а не как часть <text> контейнер.

установка dy="2" вместо y = "2" приведет к желаемому эффекту.