移动端 SVG 文本垂直对齐为何错位？检查 alignment-baseline 属性
移动端 SVG 文本垂直对齐错位时，应检查 alignment-baseline 属性是否正确设置。
检查 alignment-baseline 属性是否被覆盖
移动端 SVG 文本垂直对齐错位时，首先检查 alignment-baseline 属性是否被覆盖。根据资料，alignment-baseline 属性仅在 inline-level boxes、flex items、grid items、table cells 以及 SVG 的 text、textPath 和 tspan 元素上生效。如果元素类型不符合这些条件，或者被其他样式规则覆盖，对齐将不会按预期工作。检查代码中是否误用了该属性在不支持的元素上，或者是否有更高优先级的样式规则修改了该属性值。
确认元素类型与继承关系也很重要。资料指出该属性默认值是 baseline，且不被继承。这意味着子元素不会自动继承父元素的 alignment-baseline 设置。在移动端调试时，需要确保每个需要垂直对齐的 SVG 文本元素都显式设置了该属性，而不是依赖父元素的默认行为。如果父元素是 SVG 的 text 元素，其 alignment-baseline 属性会直接控制文本内容的对齐基准线。
验证 alignment-baseline 具体值是否匹配需求
确认属性存在后，需验证具体值是否匹配排版需求。资料列出了多种对齐基准线，如 baseline、alphabetic、central、ideographic、mathematical、middle、text-bottom 和 text-top。不同脚本和数学符号需要不同的对齐方式。例如，拉丁字母通常使用 alphabetic，而汉字可能需要 ideographic。如果设置值与实际字体或脚本不匹配，文本在移动端显示时会出现视觉上的错位或重叠。
特别注意 text-orientation 属性的影响。资料提到，当 text-orientation 为 upright 时，alphabetic 和 x-height 基准线变得没有意义，此时 middle 会改用 central 基准线。在移动端处理竖排或特殊方向文字时，这种切换可能导致对齐结果与预期不同。检查 CSS 中是否同时设置了 text-orientation，并确认 alignment-baseline 的值在当前文字方向下是合理的。
排查 SVG2 中的废弃值与浏览器兼容性
如果使用了 auto、before-edge 或 after-edge 等值，需排查是否与 SVG2 规范冲突。资料指出，这些值在 SVG2 中已被废弃，text-before-edge 是 text-top 的别名，text-after-edge 是 text-bottom 的别名。在移动端浏览器中，使用废弃值可能导致对齐行为不一致或被忽略。建议将这些废弃值替换为推荐的 text-top 或 text-bottom，以确保跨设备的一致性。
浏览器兼容性也是排查重点。资料提到，该功能自 2026 年 3 月起在最新设备和浏览器版本中可用，但在旧设备或浏览器上可能无法工作。移动端环境复杂，不同厂商的浏览器内核对废弃值的处理可能不同。检查目标用户群体的设备版本，确认 alignment-baseline 属性是否被支持。如果存在兼容性问题，需考虑降级方案或使用 SVG 属性替代 CSS 属性。
使用 SVG 示例验证对齐效果
通过对比示例代码验证对齐效果。资料提供了一个 SVG 示例，展示了不同 alignment-baseline 值在文本元素上的表现。在移动端开发中，可以复制该示例并在浏览器中查看。观察 alphabetic、central、hanging、ideographic、mathematical、middle、text-bottom 和 text-top 八种对齐方式在当前字体和屏幕尺寸下的实际位置。如果示例中的对齐结果与预期不符，说明浏览器对 alignment-baseline 的实现存在问题。
调整示例中的 font-size 和 alignment-baseline 值，观察移动端显示的变化。例如，将 font-size 设置为 20px，并依次尝试不同的对齐值，记录每种情况下的文本位置。如果发现某些值（如 hanging）在移动端显示异常，可能是浏览器实现与规范存在偏差。此时应记录具体行为，并查阅浏览器兼容性表，确认是否属于已知问题。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。