svg文本对齐演示

马黑黑

如下svg文本以中央十字虚线做参照，text标签以十字交叉点为原点，即 x="50%" y="50%"，页面初始状态文本对齐方式设置为 text-anchor="start" dominant-baseline="auto"，此为缺省或默认设置值，可以尝试更改对齐方式以便观察text标签的 text-anchor 和 dominant-baseline 属性的表现：

对齐设置：

text-anchor（水平对齐）：

start
middle
end

dominant-baseline（垂直对齐）：

auto
middle
hanging

【附】本页svg初始代码

马黑黑

dominant-baseline 属性很多介绍svg文本的资料都没有提到，我还因此误以为svg文本不能设置垂直方向的对齐方式，要用 dy 或通过 y 属性调整。刚查了外文资料发现svg text标签可以使用这个属性。

马黑黑

腾讯云有一份 dominant-baseline 资料：

https://cloud.tencent.com/developer/section/1423913

红影

弄两条参照线更直观了，可以更清楚地比较text-anchor和dominant-baseline不同选择时的样子了

红影

这横向竖向的三种对齐方式，都正好在中心参照线的两侧或当中呢，有意思

红影

马黑黑 发表于 2024-9-27 12:36
dominant-baseline 属性很多介绍svg文本的资料都没有提到，我还因此误以为svg文本不能设置垂直方向的对齐方 ...

黑黑威武，什么功能都能找到

梦江南

这个文本点代码能自动调整左右上下,为老师点赞！

马黑黑

红影 发表于 2024-9-27 13:10
弄两条参照线更直观了，可以更清楚地比较text-anchor和dominant-baseline不同选择时的样子了

这里要注意一下 text 物理起始点坐标，但text标签又不像矩形那样

马黑黑

梦江南 发表于 2024-9-27 14:17
这个文本点代码能自动调整左右上下,为老师点赞！

马黑黑

红影 发表于 2024-9-27 13:15
黑黑威武，什么功能都能找到

这个在做圆环播放器的时候其实可能用到它，只是忘记了

红影

马黑黑 发表于 2024-9-27 19:31
这里要注意一下 text 物理起始点坐标，但text标签又不像矩形那样

不管怎么说，看着居中了啊。

红影

马黑黑 发表于 2024-9-27 19:32
这个在做圆环播放器的时候其实可能用到它，只是忘记了

哦，原来之前用过的啊

马黑黑

红影 发表于 2024-9-27 19:49
哦，原来之前用过的啊

canvas画布中肯定用到过，svg应该也用到过。记得当时认为它是一个通用CSS属性。

马黑黑

红影 发表于 2024-9-27 19:48
不管怎么说，看着居中了啊。

主要是要能理解

花飞飞

马黑黑 发表于 2024-9-27 12:36
dominant-baseline 属性很多介绍svg文本的资料都没有提到，我还因此误以为svg文本不能设置垂直方向的对齐方 ...

老师也在不停的学习。。。榜样。。

花飞飞

马黑黑 发表于 2024-9-27 12:59
腾讯云有一份 dominant-baseline 资料：

https://cloud.tencent.com/developer/section/1423913

我点开看了一下的。。

红影

马黑黑 发表于 2024-9-27 20:06
canvas画布中肯定用到过，svg应该也用到过。记得当时认为它是一个通用CSS属性。

有个这样的过程，下次肯定知道了

红影

马黑黑 发表于 2024-9-27 20:06
主要是要能理解

嗯嗯，这是最主要的。

小辣椒

进来学习一下

马黑黑

小辣椒 发表于 2024-9-27 21:40
进来学习一下