使用蠟染從 SVG 到 PNG：多行文本的問題

Question

我正在使用蠟染將 SVG 轉換為 PNG 圖像，但無法正確呈現多行文本。 可能會以不確定的方式出現文本本身不再以最終圖像為中心的情況。

例如，考慮起始 SVG 的這一部分：

這是正確的渲染，我也希望在 PNG 中獲得。 順便說一下，生成的 PNG 看起來像這樣：

如您所見，頂部綠色框中的文本不再居中。

這是定義它的 SVG 片段（懷疑是字體問題，我也嘗試刪除所有font-family="" ，但沒有效果）：

  <g transform="translate(184.68 -0.600364)">
     <text fill="rgb(255, 255, 255)" fill-opacity="1" font-family="Kievit Pro" font-size="10px" font-style="normal" font-weight="normal" text-anchor="middle" transform="translate(48 0.429996)">
        <tspan dy="1em" x="0">A simple activity, with</tspan>
        <tspan dy="1.5em" x="0">a text that goes on t</tspan>
     </text>
  </g>

如果有幫助，這是我用於轉換的代碼：

static byte[] convertToPng(byte[] byteSvgSmall) throws TranscoderException, IOException {
    if (byteSvgSmall != null) {

        byte[] byteImagePng = null;
        ByteArrayInputStream bais = null;
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        InputStream targetStream = null;

        try {
            targetStream = new ByteArrayInputStream(byteSvgSmall);
            TranscoderInput input = new TranscoderInput(targetStream);

            PNGTranscoder transcoder = new PNGTranscoder();
            transcoder.addTranscodingHint(PNGTranscoder.KEY_WIDTH, new Float(diagramWidthInPixelsForPdf));

            TranscoderOutput output = new TranscoderOutput(baos);
            transcoder.transcode(input, output);

            byte[] byteOutput = baos.toByteArray();
            byteImagePng = new byte[byteOutput.length];
            bais = new ByteArrayInputStream(baos.toByteArray());
            bais.read(byteImagePng);
            targetStream.close();
            baos.flush();
            return byteImagePng;
        } catch (Exception e) {
            BeanFactory
                    .getLogger()
                    .error(SVGTransformer.class,
                            "An error occurred. A null byte[] will be returned",
                            e);
            return null;
        } finally {
            if (bais != null) bais.close();
            if (baos != null) baos.close();
            if (targetStream != null) targetStream.close();
        }
    }
    return null;
}

然后，使用返回的字節 []：

if (pngBytes != null) {
   BufferedImage final_img = ImageIO.read(new ByteArrayInputStream(pngBytes));
   File output_file = new File(imagepath);
   ImageIO.write(final_img, "png", output_file);
}

非常感謝您的任何見解。

Answer 1

我下載了你的 svg 並且文件（至少在我的電腦上）不太適合綠色框邊界內的文本（有一點溢出，被剪掉了）。 我不確定這是否是平台問題，因為您的屏幕截圖顯示的文本帶有一點邊距（而在我的情況下，用 GIMP 打開，文本超出了）。

因此，我修改了您的 svg，以便將所有 10 像素的字體大小減小到 9 像素（以適合正方形中的所有內容）。

然后我使用 java-8-openjdk-amd64、提供的 svg 和以下依賴項運行您的代碼：

compile group: 'org.apache.xmlgraphics', name: 'batik-transcoder', version: '1.9.1'
compile group: 'org.apache.xmlgraphics', name: 'xmlgraphics-commons', version: '2.2'
compile group: 'org.apache.xmlgraphics', name: 'batik-codec', version: '1.9.1'

TEST1框在我的 png 中與您的相似，但不完全相同：

A simple activity, with
  a text that goes on t

然后我修改了 xml 節點，將第二行從“a text that going on t”更改為“a text that”。 這次第二行居中。

A simple activity, with
     a text that

然后我將原始文本放回節點中，並將框的字體系列更改為Lucida Sans ，將大小更改為 7px（我在下面修改的節點）。

<text fill="rgb(255, 255, 255)" fill-opacity="1" font-family="Lucida Sans" font-size="7px" font-style="normal" font-weight="normal" text-anchor="middle" transform="translate(48 0.429996)">
    <tspan dy="1em" x="0">A simple activity, with</tspan>
    <tspan dy="1.5em" x="0">a text that goes on t</tspan>
</text>

這次是居中的。 你嘗試過什么？ 如果您嘗試上述操作（更改字體大小和/或字體系列），您會得到什么結果？ 我還使用KEY_WIDTH作為KEY_WIDTH轉碼提示，如果這可能會改變您的情況。

Answer 2

一段時間后，我終於找到了真正的問題，這要感謝關於這個 Jira的帖子。 tspans文本中的尾隨和結尾空格會導致 Batik 光柵化器誤解內容。

通過掃描 tspan 元素，並設置文本的修剪版本：

for (int tspanCounter = 0; tspanCounter < tspanList.getLength(); tspanCounter++) {
   Node tspan = tspanList.item(tspanCounter);
   tspan.setTextContent(actParts[tspanCounter].trim());
}

我得到了正確的結果。 在下面的圖片中，您可以看到有和沒有...簡單的trim()調用的結果！

錯誤的版本（tspan 內容中的空格）

“正確”版本（tspan 內容中的空白被修剪）