SVG-Edit中文本垂直对齐问题的分析与解决

问题背景

在SVG-Edit项目中，用户报告了一个关于文本垂直对齐的显示问题。当SVG文件中包含dominant-baseline="hanging"属性时，文本块会出现在错误的垂直位置，而主流浏览器如Chrome和Edge则能正确显示。

问题现象

用户提供的SVG示例中，包含一个带有dominant-baseline="hanging"属性的文本元素。在SVG-Edit编辑器中，文本没有按照预期垂直居中显示，而是出现了明显的偏移。而在浏览器中直接打开同一SVG文件时，文本显示位置正确。

技术分析

dominant-baseline是SVG文本元素的一个重要属性，它定义了文本基线相对于其内容框的对齐方式。hanging值表示基线应该位于文本的顶部，这在某些排版需求中非常有用。

SVG-Edit未能正确处理此属性的原因在于其属性白名单机制。白名单是SVG-Edit用于过滤和允许特定SVG属性的安全机制，而dominant-baseline属性未被包含在文本元素允许的属性列表中，导致编辑器忽略了这一重要属性设置。

解决方案

修复此问题需要两个步骤：

1. 扩展属性白名单：将dominant-baseline添加到SVG-Edit的文本元素允许属性列表中
2. 确保属性持久化：保证在编辑和保存过程中，该属性能够被正确保留

实现意义

这一修复不仅解决了特定属性的显示问题，更重要的是：

1. 完善了SVG-Edit对SVG文本规范的支持
2. 确保了编辑器与主流浏览器渲染行为的一致性
3. 提升了用户对专业排版需求的支持

总结

SVG编辑工具需要严格遵循SVG规范，特别是对于文本排版这类复杂功能。通过分析并解决这个垂直对齐问题，SVG-Edit在文本处理能力上又向前迈进了一步，为用户提供了更专业、更可靠的SVG编辑体验。