SVG文本对齐之text-anchor和dominant-baseline属性

马黑黑

一、text-anchor 属性

text-anchor 属性用于描述文本与给定点的对齐方式，可以是开头、中间或末尾对齐。此属性可以在 SVG 和 CSS 中使用。具体而言，text-anchor‌ 是 SVG 中用来控制‌文本水平对齐方式‌的属性，它决定了文本相对于其坐标点 (x, y) 的排列位置。该属性主要应用于 SVG 的 text、tspan 等文本元素。

💡text-anchor 属性值及其作用

1. start: 文本字符串的开始位置即当前文本的初始位置。对于拉丁文，这相当于左对齐
2. middle: 文本字符串的中间位置即当前文本的初始位置
3. end: 文本字符串的末尾即当前文本的初始位置。对于拉丁文，这相当于右对齐

二、dominant-baseline 属性

dominant-baseline（显性基线）属性用于指定用于对齐盒子文本和内联级内容的基线。它还指示参与基线对齐的任何盒子的默认对齐基线。对 SVG 而言，dominant-baseline 属性用来决定 SVG 中文本元素文本的“落脚”依据。此属性可以在 SVG 和 CSS 中使用。

💡dominant-baseline 属性值及其作用

1. auto: 默认值，基线取决于 writing-mode 属性的值。如果 writing-mode 是水平的，则基线为 alphabetic；如果是垂直的，则基线为 central
2. alphabetic: 基线为字母基线（以小写字母 a和x 底部为参照基准）
3. central: 基线为中央基线
4. hanging: 基线为悬挂基线
5. ideographic: 基线为表意基
6. mathematical: 基线为数学基线
7. middle: 基线为中间基线
8. text-bottom: 基线为文本底部
9. text-top: 基线为文本顶部

三、演示实例

🔸水平对齐 ：

start middle end

🔹垂直对齐 ：

‌alphabetic middle central hanging

参考代码 ：

梦江南

黑黑老师，这代码知识对做歌词有很大帮助。学习了！

杨帆

涨知识了，谢谢马老师精彩讲授