蜡染不能渲染正确的字体颜色？(Batik not rendering the correct font color?)

我正在使用Apache Batik Java库将.svg矢量图像文件转换为.png文件。问题是生成的.png图像的字体颜色都变黑了。这是我用来进行转换的代码：

import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import org.apache.batik.transcoder.TranscoderInput; import org.apache.batik.transcoder.TranscoderOutput; import org.apache.batik.transcoder.image.PNGTranscoder; public class SVGHelperDesktop extends SVGHelper { @Override public byte[] convertSvgToPng(String svgXml, float png_width) throws SVGConversionException { byte[] resultPngBytes = null; try { ByteArrayInputStream inputSvgBytes = new ByteArrayInputStream(svgXml.getBytes()); TranscoderInput input_svg_image = new TranscoderInput(inputSvgBytes); ByteArrayOutputStream outputPngBytes = new ByteArrayOutputStream(); TranscoderOutput output_png_image = new TranscoderOutput(outputPngBytes); PNGTranscoder svgToPngConverter = new PNGTranscoder(); svgToPngConverter.addTranscodingHint(PNGTranscoder.KEY_WIDTH, png_width); svgToPngConverter.transcode(input_svg_image, output_png_image); resultPngBytes = outputPngBytes.toByteArray(); outputPngBytes.flush(); outputPngBytes.close(); } catch (Exception e) { throw new SVGConversionException("Error converting SVG to PNG", e); } return resultPngBytes; } }

在相同的.svg文件上使用AndroidSVG库会生成具有正确颜色的正确.png图像。

另一个说明; 使用inkscape的默认字体（我用来创建矢量图形的程序）解决了这个问题。使用任何其他字体面会导致Batik将其颜色更改为黑色。

这是我的SVG文件的链接。

I'm using the Apache Batik Java library to convert .svg vector image file to a .png file. The problem is that the font colors of the generated .png image are all going black. Here is the code that I'm using to do the conversion:

import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import org.apache.batik.transcoder.TranscoderInput; import org.apache.batik.transcoder.TranscoderOutput; import org.apache.batik.transcoder.image.PNGTranscoder; public class SVGHelperDesktop extends SVGHelper { @Override public byte[] convertSvgToPng(String svgXml, float png_width) throws SVGConversionException { byte[] resultPngBytes = null; try { ByteArrayInputStream inputSvgBytes = new ByteArrayInputStream(svgXml.getBytes()); TranscoderInput input_svg_image = new TranscoderInput(inputSvgBytes); ByteArrayOutputStream outputPngBytes = new ByteArrayOutputStream(); TranscoderOutput output_png_image = new TranscoderOutput(outputPngBytes); PNGTranscoder svgToPngConverter = new PNGTranscoder(); svgToPngConverter.addTranscodingHint(PNGTranscoder.KEY_WIDTH, png_width); svgToPngConverter.transcode(input_svg_image, output_png_image); resultPngBytes = outputPngBytes.toByteArray(); outputPngBytes.flush(); outputPngBytes.close(); } catch (Exception e) { throw new SVGConversionException("Error converting SVG to PNG", e); } return resultPngBytes; } }

Using the AndroidSVG library on the same .svg file generates the correct .png image with the correct colors.

Another note; Using the default font of inkscape (the program I use to create vector graphics) solves this problem. Using any other font face causes Batik to change its colors to black.

Here's a link to my SVG file.

最满意答案

好。弄清楚问题是什么。

看来，当您使用自定义字体时，Inkscape会将自定义CSS属性-inkscape-font-specification到字母<path>的style属性中。以下是您文件的摘录：

style="... font-family:Aharoni;-inkscape-font-specification:'Aharoni, Bold';font-variant-ligatures:normal; ..."

然而，似乎Batik有一个错误，它不喜欢以短划线/连字符（“ - ”）开头的CSS属性。这似乎是一个已知的错误。

如果您需要使用一组固定的SVG，那么最简单的修复就是手动编辑SVG文件，例如，搜索并将“-inkscape-font-specification”替换为“inkscape-font-specification” ”。

如果你想要一个更通用的解决方法，那么上面的Batik bug链接有一个建议的解决方法来覆盖Batik的样式属性解析器。

Ok. Worked out what the problem is.

It seems when you use a custom font, Inkscape adds a custom CSS property, -inkscape-font-specification, to the style attribute of the <path> for the letter. Here's an excerpt from your file:

style="... font-family:Aharoni;-inkscape-font-specification:'Aharoni, Bold';font-variant-ligatures:normal; ..."

However it seems that Batik has a bug where it doesn't like CSS properties that start with a dash/hyphen ("-"). This is a known bug it seems.

If you have a fixed set of SVGs you need to work with, then the simplest fix would be just to manually edit the SVG files and, for example, search and replace "-inkscape-font-specification" with "inkscape-font-specification".

If you want a more general workaround, then the Batik bug link above has a suggested workaround to override Batik's style attribute parser.

更多推荐