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

指定 x 或 y 属性会使 tspan 绝对定位，因此它就好像它独立存在而不是<text>容器的一部分。

设置 dy="2" 而不是 y="2" 会达到你想要的效果。