SVG文本white-space:pre与换行符的浏览器兼容性问询

你遇到的场景——设置了white-space: pre的SVG文本在Firefox中按换行符分成两行显示，在Chrome中仅显示为一行，是浏览器对SVG规范细节实现的典型分歧。

一、兼容性资料说明 #

目前主流的兼容性查询平台（如MDN、Caniuse）确实没有单独收录SVG文本中white-space: pre与换行符的兼容性条目，这类属于SVG规范边缘细节的实现差异，通常不会被单独归类。不过从浏览器的实现背景来看：

• Firefox的实现延续了早期SVG规范的处理思路，允许pre值保留文本节点中的换行符并触发换行渲染
• Chrome则尝试将SVG文本的white-space处理逻辑向CSS规范对齐，但未完全适配SVG文本的排版机制，导致换行符无法触发换行

二、关于规范定义的判断 #

你的观点不完全准确，SVG规范其实有相关定义，但表述模糊导致了浏览器实现分歧：

• SVG 1.1规范中明确white-space属性的pre值应当保留文本中的空白字符（包括换行符），但未清晰说明是否要将换行符解析为文本换行
• 后续的SVG 2规范试图完全对齐CSS的white-space处理规则，但规范迭代与浏览器跟进不同步，Firefox沿用了早期实现，Chrome则在向CSS规范靠拢的过程中出现了当前的行为差异

跨浏览器兼容的替代方案 #

如果需要在所有主流浏览器中实现SVG文本换行，更可靠的方式是：

• 使用<tspan>元素分别定义每行文本，通过设置dy属性控制行间距
• 使用<foreignObject>嵌入HTML文本，借助CSS的换行规则实现跨浏览器一致的效果

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