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

Question

我正在用CorelDRAW (2021年)绘制一个图形，然后将它导出到SVG。

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

Garfield坐在垫子上

问题：某些浏览器(如Chrome和Edge )在SVG中将文本显示为：

Garfield坐在垫子上

也就是说，与大胆的“加菲尔德”毗邻正常的“坐”，没有空间。

在其他浏览器(如Firefox )中，显示相同SVG的空间与预期相同。

示例SVG (从CorelDRAW导出的示例:不是一个真正的最小示例，但我已经删除了一些多余的标记)：

​

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW 2021.5 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="3.44562in" height="0.247335in" version="1.1" viewBox="0 0 18928.2 1358.7">
 <defs>
  <style type="text/css">
   <![CDATA[
    .fil0 {fill:#373435}
    .fnt1 {font-weight:normal;font-size:1831.1px;font-family:'Arial'}
    .fnt0 {font-weight:bold;font-size:1831.1px;font-family:'Arial'}
   ]]>
  </style>
 </defs>
 <text x="-87.9" y="1334.9"  class="fil0 fnt0">Garfield</text>
 <text x="6831.7" y="1334.9"  class="fil0 fnt1"> sat on the mat</text>
</svg>

​

Answer 1

Chrome和Edge，可能还有其他浏览器，忽略SVG <text>元素中的前导空间。

下面是SVG的一个片段：

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

(“.”指示自定义属性)

注意：

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

解决方案： In CorelDRAW，不要在单个文本对象中混合字体权重。

更普遍的是，无论您使用什么应用程序创建SVG:如果在呈现SVG时(例如在浏览器中)注意到缺少空间，请检查相应的SVG <text>元素的内容是否以前导空格开头。如果是这样，请在原始应用程序中重新加工您的艺术品，以避免SVG输出。

Answer 2

通常，对于html2pdf来说，与许多应用程序一样，沉重的文本往往会“延伸”到一个后续的空白，或者在这种情况下，主导空间是没有定义的。强制使用空格的一种方法是在标准html中尝试  (参见https://stackoverflow.com/a/74297349/10802527中的强制空格)。

​

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW 2021.5 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="3.44562in" height="0.247335in" version="1.1" viewBox="0 0 18928.2 1358.7">
 <defs>
  <style type="text/css">
   <![CDATA[
    .fil0 {fill:#373435}
    .fnt1 {font-weight:normal;font-size:1831.1px;font-family:'Arial'}
    .fnt0 {font-weight:bold;font-size:1831.1px;font-family:'Arial'}
   ]]>
  </style>
 </defs>
 <text x="-87.9" y="1334.9"  class="fil0 fnt0">Garfield</text>
 <text x="6831.7" y="1334.9"  class="fil0 fnt1">&nbsp;sat on the mat</text>
</svg>

​