使用蠟染將SVG文件轉換為PNG，但沒有AXIS行

Question

我正在使用蠟染庫將SVG文件轉換為PNG，它可以工作，但在PNG文件中未顯示AXIS行。 另一方面，如果我使用csiro lib創建PNG，則會創建AXIS行，但我沒有使用此庫，因為它無法正確處理UTF-8字符。

請檢查分別使用batik和csiro lib創建的PNG文件。

謝謝。

下面是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> 

Answer 1

顏色不是SVG的有效屬性。 對於線條，您需要將其替換為stroke屬性。

如果csiro顯示任何內容，則說明操作不正確，您可能希望將其報告為錯誤。 蠟染渲染，盡管不是您想要的，但對於您所擁有的標記是正確的。

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