为什么 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" 将达到您想要的效果。