svg text标签的位置问题

STAR
  • 136

有如下html结构

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

显示效果:
发现垂直部分的对齐是在底部的
image.png

下调文本的y值为30:
image.png
这样才能完全显示

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

回复
阅读 327
2 个回答

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

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

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

<svg width="500" height="500">
<text x="0" y="0" font-size="30" 
 transform="translate(0,30)">111111</text>
 </svg>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏