移动端 SVG 文本垂直对齐错位如何排查？检查 alignment-baseline 属性
当 SVG 文本在移动端显示时，如果文字位置与预期不符，通常是因为未正确设置对齐基线。
确认元素类型与属性适用范围
alignment-baseline 属性仅对 inline-level boxes、flex items、grid items、table cells 以及 SVG 的 text、textPath 和 tspan 元素生效。如果目标元素是普通 div 或 img，该属性不会产生任何效果。在移动端调试时，首先需要确认被对齐的元素是否属于上述类型，特别是 SVG 内部的文本元素。检查代码中是否直接在 SVG 标签上使用了该属性，因为 SVG 元素通常需要通过 CSS 选择器或内联样式来应用此属性。
该属性在 SVG 文本布局中指定了与 SVG 当前文本位置对齐的基线。如果父级元素没有正确建立对齐上下文，子元素的 alignment-baseline 可能无法生效。例如，如果父级 text 元素没有设置正确的坐标或字体，子元素的对齐行为可能会出现偏差。在移动端浏览器中，不同设备对 SVG 的渲染引擎可能略有差异，因此需要确保属性值在当前设备上被正确解析。
选择合适的基线对齐关键字
根据内容类型选择正确的关键字是解决对齐问题的关键。alphabetic 适用于拉丁文、西里尔文、希腊文等脚本，将盒子的字母基线与父级对齐，对应大多数字符的底部。ideographic 用于汉字等表意文字，将盒子的表意文字面下侧基线与父级对齐。mathematical 用于数学字符，将盒子的数学基线与父级对齐，对应数学字符设计的中心基线。central 将盒子的中心基线与父级的中心基线对齐，对应表意文字的中心基线。
middle 将盒子的垂直中点与父级基线加上父级 x 高度的一半对齐。text-bottom 将盒子的底部与父级内容区域的顶部对齐。text-top 将盒子的顶部与父级内容区域的顶部对齐。在移动端开发中，如果文字包含中英文混排，建议优先使用 ideographic 或 central 以确保视觉平衡。如果文字主要是数学公式，则应使用 mathematical。
检查属性值是否被正确继承或覆盖
alignment-baseline 属性的初始值为 baseline，它会使用父级的 dominant-baseline 值。如果父级元素没有设置 dominant-baseline，则默认使用浏览器的默认基线。在移动端调试时，可以使用浏览器开发者工具检查元素的计算样式，确认 alignment-baseline 的值是否为预期的关键字。如果发现值被覆盖，可能是父级元素或更高层级的样式设置了冲突的值。
该属性是离散动画类型，不会产生过渡效果。在移动端 CSS 中，可以使用 inherit、initial、revert 或 unset 等全局值来控制属性的继承行为。如果希望子元素继承父级元素的对齐方式，可以显式设置 alignment-baseline: inherit。如果希望恢复到浏览器默认行为，可以使用 alignment-baseline: revert。在移动端调试时，确保没有其他 CSS 规则通过 !important 或更高优先级的选择器覆盖了该属性。
验证渲染结果与预期是否一致
在移动端设备或模拟器上查看渲染结果，确认文字是否按照预期的基线对齐。如果文字仍然错位，可以尝试将 alignment-baseline 的值从 alphabetic 改为 ideographic，或者从 middle 改为 central，观察变化是否符合预期。在移动端调试时，可以使用截图工具对比不同属性值下的渲染效果。如果文字在移动端显示正常但在桌面端显示异常，可能是移动端浏览器的渲染引擎对某些基线关键字的支持不同。
在 SVG2 规范中，auto、before-edge 和 after-edge 已被弃用，text-before-edge 是 text-top 的别名，text-after-edge 是 text-bottom 的别名。在移动端开发中，应避免使用这些已弃用的关键字，以确保代码的兼容性。如果发现文字在移动端显示异常，可以检查是否使用了这些已弃用的关键字，并将其替换为 text-top 或 text-bottom。通过逐步调整属性值并验证结果，可以找到最合适的对齐方式。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。