SVG单独绘制两个字形重叠，如何利用文件信息调整相对位置？

嘿，这个问题我之前帮人排查过类似的——本质是你只提取了字形的d路径数据，却漏掉了LaTeX排版时的位置偏移信息，dvisvgm生成的SVG里其实已经把这些信息藏起来了，咱们一步步来解决：

第一步：先拆解原始SVG的关键信息 #

打开你用dvisvgm生成的SVG文件，重点找这两类控制位置的内容：

• 路径的transform属性：dvisvgm通常会给每个字符对应的<path>标签加上transform="translate(x y)"，这个translate的数值就是该字形相对于画布原点的位置偏移。比如减号的路径可能是transform="translate(0 0)"，数字1的路径是transform="translate(5 0)"——这个x轴的偏移就是它们的相对间距。
• 字体字形的horiz-adv-x属性：如果SVG里用了<font>和<glyph>定义字体，每个<glyph>标签会带有horiz-adv-x属性，这个值是该字形的水平前进宽度，前一个字形的宽度就是下一个字形的起始x偏移量（比如减号的horiz-adv-x是6，那数字1的起始x坐标就是6）。

第二步：手动应用位置偏移信息 #

不管是哪种情况，你只需要把这个偏移信息加到每个字形的绘制逻辑里就行：

方法1：保留transform变换 #

如果原始路径自带transform，直接把这个属性和d属性一起复用。比如用SVG重新绘制的示例：

<svg width="15" height="12">
  <!-- 减号：复用原始的transform和d属性 -->
  <path d="M1 5h4v1h-4z" transform="translate(0 2)" />
  <!-- 数字1：加上对应的偏移transform -->
  <path d="M2 1v8h1l2-4l-2-4z" transform="translate(6 2)" />
</svg>

方法2：直接修改路径坐标 #

如果你不想用transform，也可以把偏移量直接合并到路径的坐标里。注意SVG路径中，大写字母是绝对坐标，小写是相对坐标——只需要给所有绝对坐标的x值加上偏移量即可。比如数字1的x偏移是6，原始路径M2 1v8h1l2-4l-2-4z就改成M8 1v8h1l8-4l8-4z（仅修改绝对坐标的x值）。

为什么会出现重叠？ #

LaTeX的排版系统会给每个字符分配“前进宽度”来控制字符间距，dvisvgm生成SVG时，不会把这个偏移直接合并到d路径的坐标里，而是单独用transform或字体属性存储——你只提取d属性的话，相当于把两个字形都放在了原点位置，自然就重叠了。

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