使用蜡染将SVG文件转换为PNG，但没有AXIS行 [英] SVG file converted to PNG using batik but No AXIS line

问题描述

我正在使用蜡染库将SVG文件转换为PNG，它可以工作，但未在PNG文件中显示AXIS行.另一方面，如果我使用csiro lib创建PNG，则会创建AXIS行，但我没有使用此库，因为它无法正确处理UTF-8字符.

I am converting SVG file to PNG using batik library, It works but it is not showing AXIS line in PNG file. On the other hand if I create PNG using csiro lib it creates AXIS line but I am not using this library because it not working properly with UTF-8 characters.

请分别检查使用batik和csiro lib创建的PNG文件.

Please check the PNG file created using batik and csiro lib respectively.

谢谢.

下面是SVG代码

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="463.53553390593277" height="307.0710678118655">
<rect x="0" y="0" width="463.53553390593277" height="307.0710678118655" fill="#FAFAFA"/>

<rect x="60" y="20" width="380" height="230" fill="#FFFFFF"/>

<rect width="76" height="188" opacity="0.16666667" fill="#0000CC" x="60" y="62"/>

<rect width="76" height="125" opacity="0.33333334" fill="#0000CC" x="136" y="125"/>

<rect width="76" height="157" opacity="0.5" fill="#0000CC" x="212" y="93"/>

<rect width="76" height="125" opacity="0.6666667" fill="#0000CC" x="288" y="125"/>

<rect width="76" height="125" opacity="0.8333333" fill="#0000CC" x="364" y="125"/>

<line color="#000000" stroke-width="2" x1="60" y1="250" x2="60" y2="20"/>
<line color="#000000" stroke-width="2" x1="60" y1="250" x2="440" y2="250"/>
<polygon fill="#000000" stroke-width="1" points="61,13 67,21 54,21"/><line color="#000000" x1="56" y1="219" x2="60" y2="219"/>
<line color="#000000" x1="56" y1="188" x2="60" y2="188"/>
<line color="#000000" x1="56" y1="156" x2="60" y2="156"/>
<line color="#000000" x1="56" y1="125" x2="60" y2="125"/>
<line color="#000000" x1="56" y1="93" x2="60" y2="93"/>
<line color="#000000" x1="56" y1="62" x2="60" y2="62"/>
<line color="#000000" x1="56" y1="30" x2="60" y2="30"/>

<g transform="translate(98,265)">
<g transform="rotate(45)">
<text x="0" y="0" font-size="12px">A</text>
</g>
</g>
<g transform="translate(174,265)">
<g transform="rotate(45)">
<text x="0" y="0" font-size="12px">B</text>
</g>
</g>
<g transform="translate(250,265)">
<g transform="rotate(45)">
<text x="0" y="0" font-size="12px">C</text>
</g>
</g>
<g transform="translate(326,265)">
<g transform="rotate(45)">
<text x="0" y="0" font-size="12px">D</text>
</g>
</g>
<g transform="translate(402,265)">
<g transform="rotate(45)">
<text x="0" y="0" font-size="12px">E</text>
</g>
</g>
<text x="61" y="10" font-size="9px" text-anchor="middle">Value</text>
<text x="53" y="223" font-size="10px" text-anchor="end">1</text>
<text x="53" y="192" font-size="10px" text-anchor="end">2</text>
<text x="53" y="160" font-size="10px" text-anchor="end">3</text>
<text x="53" y="129" font-size="10px" text-anchor="end">4</text>
<text x="53" y="97" font-size="10px" text-anchor="end">5</text>
<text x="53" y="66" font-size="10px" text-anchor="end">6</text>
<text x="53" y="34" font-size="10px" text-anchor="end">7</text>

</svg>

推荐答案

color对SVG无效.对于线条，您需要将其替换为stroke属性.

color is not a valid attribute for SVG. For lines you'll need to replace it with the stroke attribute.

如果csiro显示任何内容，则说明操作不正确，您可能希望将其报告为错误.蜡染渲染，尽管不是您想要的，但对于您所拥有的标记是正确的.

If csiro displays anything then it's not doing it right, you might want to report that as a bug. Batiks rendering, despite not being what you wanted, was correct for the markup you had.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="463.53553390593277" height="307.0710678118655">
<rect x="0" y="0" width="463.53553390593277" height="307.0710678118655" fill="#FAFAFA"/>

<rect x="60" y="20" width="380" height="230" fill="#FFFFFF"/>

<rect width="76" height="188" opacity="0.16666667" fill="#0000CC" x="60" y="62"/>

<rect width="76" height="125" opacity="0.33333334" fill="#0000CC" x="136" y="125"/>

<rect width="76" height="157" opacity="0.5" fill="#0000CC" x="212" y="93"/>

<rect width="76" height="125" opacity="0.6666667" fill="#0000CC" x="288" y="125"/>

<rect width="76" height="125" opacity="0.8333333" fill="#0000CC" x="364" y="125"/>

<line stroke="#000000" stroke-width="2" x1="60" y1="250" x2="60" y2="20"/>
<line stroke="#000000" stroke-width="2" x1="60" y1="250" x2="440" y2="250"/>
<polygon fill="#000000" stroke-width="1" points="61,13 67,21 54,21"/><line stroke="#000000" x1="56" y1="219" x2="60" y2="219"/>
<line stroke="#000000" x1="56" y1="188" x2="60" y2="188"/>
<line stroke="#000000" x1="56" y1="156" x2="60" y2="156"/>
<line stroke="#000000" x1="56" y1="125" x2="60" y2="125"/>
<line stroke="#000000" x1="56" y1="93" x2="60" y2="93"/>
<line stroke="#000000" x1="56" y1="62" x2="60" y2="62"/>
<line stroke="#000000" x1="56" y1="30" x2="60" y2="30"/>

<g transform="translate(98,265)">
<g transform="rotate(45)">
<text x="0" y="0" font-size="12px">A</text>
</g>
</g>
<g transform="translate(174,265)">
<g transform="rotate(45)">
<text x="0" y="0" font-size="12px">B</text>
</g>
</g>
<g transform="translate(250,265)">
<g transform="rotate(45)">
<text x="0" y="0" font-size="12px">C</text>
</g>
</g>
<g transform="translate(326,265)">
<g transform="rotate(45)">
<text x="0" y="0" font-size="12px">D</text>
</g>
</g>
<g transform="translate(402,265)">
<g transform="rotate(45)">
<text x="0" y="0" font-size="12px">E</text>
</g>
</g>
<text x="61" y="10" font-size="9px" text-anchor="middle">Value</text>
<text x="53" y="223" font-size="10px" text-anchor="end">1</text>
<text x="53" y="192" font-size="10px" text-anchor="end">2</text>
<text x="53" y="160" font-size="10px" text-anchor="end">3</text>
<text x="53" y="129" font-size="10px" text-anchor="end">4</text>
<text x="53" y="97" font-size="10px" text-anchor="end">5</text>
<text x="53" y="66" font-size="10px" text-anchor="end">6</text>
<text x="53" y="34" font-size="10px" text-anchor="end">7</text>

</svg>

这篇关于使用蜡染将SVG文件转换为PNG，但没有AXIS行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！