使用Batik库将SVG转PNG时坐标轴缺失问题咨询

我仔细看了你的SVG代码和问题描述，一眼就发现了问题所在——坐标轴线条的属性使用不符合SVG标准，这也是两个库表现差异的核心原因：

问题根源 #

你给坐标轴的<line>元素用了color="#000000"来设置线条颜色，但SVG规范里明确规定，图形元素的描边颜色应该用stroke属性定义，color属性是专门给文本元素设置颜色的。CSIRO库可能做了非标准兼容，自动把color映射成了stroke，但Batik是严格遵循SVG规范的，直接忽略了这个不合法的属性，导致坐标轴线条没有颜色，看起来就像没显示一样。

解决方案 #

把所有坐标轴相关<line>元素的color="#000000"全部替换为stroke="#000000"，你的stroke-width属性已经设置好了，不需要改动。

完整修复后的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 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>

效果验证 #

修改后用Batik转换，坐标轴线条会正常显示，同时Batik对UTF-8字符的支持也没问题，完美解决了之前的两个痛点。

内容的提问来源于stack exchange，提问作者compyutech