如何让SVG文本元素顶部对齐红色矩形上边框？

解决方案 #

alignment-baseline="top"不生效的核心原因是该属性的作用是控制文本作为子元素时与父元素的基线对齐规则，并不控制文本自身相对于其y属性值的对齐逻辑，你可以用以下两种方案实现需求：

• 方案一（推荐，兼容性好）：将alignment-baseline属性替换为dominant-baseline，值设为hanging，即可让文本顶部直接对齐你设置的y坐标位置。
  修改后的代码如下：

<text dominant-baseline="hanging" x="400" y="319" fill="#cf1616" font-size="35px" style="font-family: Tahoma, Geneva, sans-serif; cursor: pointer;">TEXT</text>

• 方案二（兼容极旧渲染环境）：删除alignment-baseline属性，新增dy属性设置偏移量，根据你使用的字体特性调整偏移值即可，示例：

<text dy="-0.85em" x="400" y="319" fill="#cf1616" font-size="35px" style="font-family: Tahoma, Geneva, sans-serif; cursor: pointer;">TEXT</text>

内容的提问来源于stack exchange，提问作者user15361861