为啥 SVG tspan y 属性会改变文本的水平对齐方式？

Posted 2023-03-05

【中文标题】为啥 SVG tspan y 属性会改变文本的水平对齐方式？

【英文标题】：Why does the SVG tspan y attribute alter the horizontal alignment of text?为什么 SVG tspan y 属性会改变文本的水平对齐方式？

【发布时间】：2016-02-23 22:11:18

【问题描述】：

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/

【参考方案1】：

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

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