svg - 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

<text>x または y 属性を指定すると、tspan が絶対的に配置されるため、コンテナーの一部としてではなく、単独で存在するかのようになります。

y="2" ではなく dy="2" を設定すると、必要な効果が得られます。