使用蜡染将SVG文件转换为PNG，但没有AXIS行

Question

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.

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

Thanks.

Below is SVG code

 <?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> 

Answer 1

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

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>