SVG 文字上标下标错位？检查 CSS baseline-shift 覆盖属性
SVG 内部文字上标下标位置异常时，应优先检查 CSS 的 baseline-shift 属性是否覆盖了 SVG 标签内的属性设置。
确认 CSS 是否覆盖了 SVG 属性
SVG 文字元素中的上标或下标位置异常，通常是因为 CSS 样式中的 baseline-shift 属性覆盖了 SVG 标签内的 baseline-shift 属性。根据资料说明，当 CSS 中存在 baseline-shift 属性时，其值会覆盖元素上的 baseline-shift 属性。这意味着如果 SVG 标签内设置了 baseline-shift 属性，但 CSS 中也设置了该属性，浏览器将优先使用 CSS 的值。因此，排查此类问题时，需要检查 CSS 文件中是否对 tspan 元素应用了 baseline-shift 属性，并确认其值是否正确。
为了验证这一覆盖关系，可以在浏览器开发者工具中选中对应的 tspan 元素，查看计算后的样式。如果计算样式中的 baseline-shift 值与 CSS 中的设置一致，而与 SVG 标签内的属性不一致，则说明 CSS 成功覆盖了属性。此时，应修正 CSS 中的值或移除 CSS 中的该属性，以恢复预期的上标或下标位置。需要注意的是，baseline-shift 属性仅适用于 SVG 内嵌的 textPath 和 tspan 元素，不适用于其他 SVG、HTML 元素或伪元素。
检查属性应用范围与元素类型
在排查上标下标错位问题时，必须确认应用了 CSS 属性的元素类型是否正确。资料明确指出，baseline-shift 属性仅适用于嵌套在 SVG 内部的 textPath 和 tspan 元素。如果错误地将该属性应用到了普通的 HTML 标签或 SVG 的其他元素上，将不会产生任何效果，导致文字位置无法调整。因此，在编写 CSS 时，应确保选择器仅针对 SVG 内部的 textPath 或 tspan 元素。
除了元素类型，还需要确认属性值的语法是否正确。CSS 中的 baseline-shift 属性支持多种值类型，包括关键字 sub 和 super，以及长度或百分比。如果使用了不支持的值，或者语法格式错误，浏览器将忽略该属性。例如，如果 CSS 中设置了 baseline-shift: 10px，而浏览器不支持该值，则该属性将无效。建议使用资料中提到的 sub 或 super 关键字，或者确保使用的长度和百分比语法符合规范。
验证浏览器兼容性
由于 baseline-shift 属性在 2026 年 3 月才在所有最新设备和浏览器版本中可用，旧设备或旧版浏览器可能不支持该属性。如果目标用户群体中包含使用旧设备的用户，可能会出现文字位置无法调整的情况。资料提到，如果浏览器不支持 baseline-shift 属性，可以通过 @supports 规则检测并显示提示信息。因此，在部署此类样式前，应确认目标用户的浏览器版本是否支持该属性。
为了验证兼容性，可以在浏览器中测试该属性是否生效。如果浏览器不支持，可以尝试使用 SVG 标签内的 baseline-shift 属性作为备选方案。需要注意的是，即使浏览器支持该属性，也可能存在渲染差异。因此，建议在多种设备和浏览器上进行测试，确保文字上标下标的位置在不同环境下都能正确显示。如果发现兼容性问题，可以考虑使用 SVG 标签内的属性作为主要方案，或者提供降级处理。
排查其他可能的样式冲突
除了 baseline-shift 属性本身，其他 CSS 样式也可能影响文字的位置。例如，font-size、font-family 或其他文本相关属性的变化，可能会间接影响上标下标的显示效果。因此，在排查问题时，应检查是否有其他样式影响了 tspan 元素。如果发现其他样式冲突，可以尝试调整这些样式，或者使用更具体的选择器来隔离 baseline-shift 属性的影响。
此外，SVG 内部的布局和坐标系也可能影响文字的位置。如果 SVG 的 viewBox 或其他布局属性设置不当，可能会导致文字位置偏移。虽然这通常不是 baseline-shift 属性的问题，但在排查时也应一并检查。建议使用浏览器开发者工具的 SVG 面板，检查 SVG 的布局和坐标设置是否正确。如果发现布局问题，可以调整 SVG 的 viewBox 或其他属性，以确保文字位置正确。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。