SVG到PNG文本无法正确显示-Arial字体 [英] SVG to PNG text not showing properly - Arial font
问题描述
当存在诸如Arial之类的具有不同字体系列的文本时，我遇到了使用Apache Batik转换PNG的问题.该问题发生在运行Tomcat 7和Java 6的Cent OS 6的环境中.
I'm having an issue of converted PNG using Apache Batik is different when there is a text with different font-family, like Arial. The issue occurs in the environment where Cent OS 6 running Tomcat 7 and Java 6.
用于将SVG转换为PNG的Java代码是:
The Java code used to convert SVG to PNG is :
// Convert the SVG image to png and send back
PNGTranscoder transcoder = new PNGTranscoder();
//
TranscoderInput input = new TranscoderInput(new ByteArrayInputStream(svgImage));
outStream = new ByteArrayOutputStream();
TranscoderOutput output = new TranscoderOutput(outStream);
// Transcode the given SVG
transcoder.transcode(input, output);
outStream.flush();
pngImage = outStream.toByteArray();
我要转换为PNG的SVG文件为:
The SVG file I am going to convert to PNG is :
<svg version="1.1" x="0" y="0" id="hjtqebzv1" width="610" height="240" xmlns="http://www.w3.org/2000/svg" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="LFFFFFF0" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:0.8"/>
<stop offset="100%" style="stop-color:#FAFAFA;stop-opacity:1"/>
</linearGradient>
</defs>
<g id="hjtqebzv-o1" transform="translate(5,5)">
<rect x="1" y="1" width="578" height="20" fill="url(#LFFFFFF0)" stroke="#5e5ca7" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>
<text x="1" y="1" width="578" height="19" >
<tspan x="2" y="14" style="font-family:Arial;font-size:12px;fill:#000000;">This is a test text for testing text overlapping in the rectangle when convert the svg to PNG using SVG-Batik</tspan>
</text>
</g>
</svg>
当我在Firefox浏览器中打开SVG文件时，其显示如下图所示:
When I open the SVG file in Firefox browser it displays properly as given in the below image :
但是，当我使用Apache Batik转换SVG时，转换后的图像看起来有所不同. Apache Batik转换的PNG为:
But when I convert the SVG using Apache Batik, the converted image looks different. The Apache Batik converted PNG is:
在运行tomcat 7和Java 7的Windows 7中，生成的图像与原始SVG相同.
In the Windows 7 running tomcat 7 and Java 7, the generated image is identical to the original SVG.
作为Cent OS服务器，它提供文本混乱的图像，我感觉Arial字体不可用于tomcat/java应用程序，需要手动加载.如果是这样，我宁愿建议您从底层操作系统位置(操作系统字体位置)以通用方式加载它们，而无需对SVG文件进行任何更改.
As the Cent OS server it gives the text messed image I feel the Arial font is not available to the tomcat/java application and need to load it manually. If so I prefer to have an advice to load them in a common way from the underlying OS location (OS font location) without any changes to the SVG file.
推荐答案
您需要安装Microsoft truetype字体，并通过设置JAVA_FONTS环境变量使它们对Java虚拟机可用.
You need to install Microsoft truetype fonts and make them available to java virtual machine by setting JAVA_FONTS environment variable.
wget http://www.my-guides.net/en/images/stories/fedora12/msttcore-fonts-2.0-3.noarch.rpm
rpm -ivh msttcore-fonts-2.0-3.noarch.rpm
打开/etc/bashrc并在文件末尾添加以下内容
Open /etc/bashrc and add following to the end of the file
JAVA_FONTS=/usr/share/fonts/msttcore
export JAVA_FONTS
