为什么在某些浏览器中 SVG 文本中缺少空格？

Question

我正在 CorelDRAW (2021) 中绘制图形，然后将其导出为 SVG。

在 CorelDRAW 中，艺术文本对象之一包含不同字体粗细的文本。例如：

加菲猫坐在垫子上

问题：某些浏览器，例如 Chrome 和 Edge，在 SVG 中显示该文本：

加菲猫坐在垫子上

也就是说，粗体的“Garfield”紧挨着正常的“sat”，没有空格。

在其他浏览器（例如 Firefox）中，会按预期显示相同的 SVG，但带有空格。

Answer 1

一开始，我很困惑。我担心会出现“假粗体”问题，但我认为不可能是这样，因为在 SVG 中，我非常刻意地嵌入了所有必需的字体粗细（400、700）。

原来它与字体无关。

这是 SVG 的 sn-p：

<text ... class="fil4 fnt0">Garfield</text>
<text ... class="fil4 fnt1"> sat on the mat</text>

（其中“...”表示省略的属性）

注意：

• CorelDRAW 已将原始单个文本对象拆分为两个 SVG <text> 元素。可以理解，因为字体粗细不同（.fnt0 为粗体，.fnt1 为正常）。
• 第二个<text> 元素的内容以空格开头。

诊断： Chrome 和 Edge 以及可能的其他浏览器会忽略 SVG <text> 元素内的前导空格。

解决方法：在 CorelDRAW 中，不要在单个文本对象中混合字体粗细。