使用 Batik 到 SVG 将 SVG 转换为 PNG 时 Linux 和 OSX 之间的文本差异

Question

当我在 Linux 环境中运行相同的代码并尝试使用蜡染将 svg 转换为 png 时，文本的位置会发生偏移。

OSX 中的相同代码给出了正确的 png。似乎在 Linux 中所有文本元素的位置都在向右移动。

Linux：

OS X：

为什么 Linux 上的图片有问题？

---

代码如下：

TranscoderInput input = new TranscoderInput(svgPath);
// define OutputStream to PNG Image and attach to TranscoderOutput
OutputStream ostream = null;
File tempOutputFile = File.createTempFile(svgPath, ".png");
tempOutputFile.deleteOnExit();
try {
    ostream = new FileOutputStream(tempOutputFile);
} catch (FileNotFoundException e) {
    e.printStackTrace();
}
TranscoderOutput output = new TranscoderOutput(ostream);
// create a JPEG transcoder
PNGTranscoder t = new PNGTranscoder();
// set the transcoding hints
// convert and write output
t.transcode(input, output);
// flush and close the stream then exit
ostream.flush();
ostream.close();
return tempOutputFile;

SVG 文件：

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->

  <title>Layer 1</title>
  <rect display-height="NaN" display-width="NaN" display-y="125.5" display-x="65.25" rect-id="0" id="svg_1" height="194" width="316" y="115" x="129" stroke-width="0.5" stroke="#000000" fill="none"/>
  <text alignment-baseline="text-before-edge" xml:space="preserve" text-anchor="start" font-family="serif" font-size="24" id="svg_2" y="125.5" x="65.25" stroke-width="0" stroke="#000000" fill="#000000">sssssss</text>

</svg>

Answer 1

首先，我不确定您想要达到什么结果。这两个屏幕截图以及问题中嵌入的 sn-p 都显示了不同的内容。您是否想让文本的结尾与矩形的左侧重合？

这里有几个潜在的问题：

1. 您没有在所有环境中使用相同的字体。您可以从屏幕截图中看出这一点。 “sans-serif”不一定会在不同的操作系统中最终成为相同的字体。尤其是如果两者都没有安装相同的字体。

2. 即使使用完全相同的字体、不同的字体渲染引擎，渲染文本也会略有不同。您不一定会获得像素完美的定位。

3. 我可能错了，但我怀疑 Batik 可能不支持 alignment-baseline。所以这会影响你的文本定位。

4. 如果您希望一段文本的结尾与某个点完全一致，则使用text-anchor="end" 使文本右对齐。见下文。

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <rect id="svg_1" height="194" width="316" y="115" x="129" stroke-width="0.5" stroke="#000000" fill="none"/>
  <text text-anchor="end" font-family="serif" font-size="24" id="svg_2" y="115" x="129" stroke-width="0" stroke="#000000" fill="#000000">Exact corner</text>
</svg>