svg text标签的位置问题

Question

有如下html结构

<svg width="500" height="500">
    <text x="0" y="0" font-size="30">111111</text>
</svg>

显示效果：
发现垂直部分的对齐是在底部的

下调文本的y值为30：

这样才能完全显示

官网的text-anchor也只是水平部分的对齐
有没有大佬知道怎么样配置，才能使y=0时的文本也是对齐顶部

Answer 1

可以试一试这个属性。alignment-baseline

<svg width="500" height="500">
    <text x="0" y="0" font-size="30" alignment-baseline="text-before-edge">111111</text>
</svg>

Answer 2

好奇你为啥非得让基点为0呢? 爱好? 那加个translate

<svg width="500" height="500">
<text x="0" y="0" font-size="30" 
 transform="translate(0,30)">111111</text>
 </svg>