Question

我使用Vaadin的图表4.0.0（Vaadin版本8.0.7）生成SVG文件。然后我尝试将此SVG文件转换为JPG文件，但每次它总是空白。

生成SVG文件的代码：

String svg = SVGGenerator.getInstance().generate(chart.getConfiguration());

使用Batik转换为jpg的代码是：

public static void main(String[] args) throws Exception
{
    InputStream inputStream = new FileInputStream(new File("C:\\temp\\chart.svg"));

    JPEGTranscoder t = new JPEGTranscoder();
    t.addTranscodingHint(JPEGTranscoder.KEY_QUALITY, new Float(.8));

    TranscoderInput input = new TranscoderInput(inputStream);

    OutputStream outputStream = new FileOutputStream("C:\\temp\\chart.jpg");
    TranscoderOutput output = new TranscoderOutput(outputStream);

    t.transcode(input, output);

    outputStream.flush();
    outputStream.close();
    System.exit(0);
}

生成的SVG文件：

<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="font-family:Open Sans, Helvetica Neue, Arial, sans-serif;font-size:14px;" xmlns="http://www.w3.org/2000/svg" width="600" height="400"><desc>Created with Highstock 4.2.6</desc><defs><clipPath id="highcharts-1"><rect x="0" y="0" width="515" height="245"></rect></clipPath></defs><rect x="0" y="0" width="600" height="400" fill="#FFFFFF" class=" highcharts-background"></rect><rect x="75" y="56" width="515" height="245" fill="rgb(255,255,255)" fill-opacity="0.00"></rect><path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 101.5 56 L 101.5 301 186.5 301 186.5 56"></path><path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 269.5 56 L 269.5 301 355.5 301 355.5 56"></path><path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 437.5 56 L 437.5 301 523.5 301 523.5 56"></path><path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 75 301.5 L 590 301.5 590 252.5 75 252.5"></path><path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 75 203.5 L 590 203.5 590 154.5 75 154.5"></path><path fill="rgb(255,255,255)" fill-opacity="0.00" d="M 75 105.5 L 590 105.5 590 56.5 75 56.5"></path><g class="highcharts-grid"></g><g class="highcharts-grid"><path fill="none" d="M 75 301.5 L 590 301.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path><path fill="none" d="M 75 252.5 L 590 252.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path><path fill="none" d="M 75 203.5 L 590 203.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path><path fill="none" d="M 75 154.5 L 590 154.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path><path fill="none" d="M 75 105.5 L 590 105.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path><path fill="none" d="M 75 55.5 L 590 55.5" stroke="#DFDFDF" stroke-width="1" opacity="1"></path></g><g class="highcharts-axis"><text x="332.5" text-anchor="middle" transform="translate(0,0)" class=" highcharts-xaxis-title" style="color:#808080;font-weight:normal;fill:#808080;" y="344">Months</text></g><g class="highcharts-axis"><text x="26" text-anchor="middle" transform="translate(0,0) rotate(270 26 178.5)" class=" highcharts-yaxis-title" style="color:#808080;font-weight:normal;fill:#808080;" y="178.5">Sales</text></g><g class="highcharts-series-group"><g class="highcharts-series highcharts-series-0" transform="translate(75,56) scale(1 1)" clip-path="url(#highcharts-1)"><path fill="none" d="M 5.0490196078431 197.96 L 87.939591066799 156.8 L 173.42188718933 92.12 L 509.95098039216 39.20000000000002" stroke="#3090F0" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path><path fill="none" d="M -4.9509803921569 197.96 L 5.0490196078431 197.96 L 87.939591066799 156.8 L 173.42188718933 92.12 L 509.95098039216 39.20000000000002 L 519.95098039216 39.20000000000002" stroke-linejoin="round" visibility="visible" stroke="rgb(192,192,192)" stroke-opacity="0.0001" stroke-width="22" class=" highcharts-tracker" style=""></path></g><g class="highcharts-markers highcharts-series-0 highcharts-tracker" transform="translate(75,56) scale(1 1)" style="" clip-path="none"><path fill="#3090F0" d="M 509 35.20000000000002 C 514.328 35.20000000000002 514.328 43.20000000000002 509 43.20000000000002 C 503.672 43.20000000000002 503.672 35.20000000000002 509 35.20000000000002 Z"></path><path fill="#3090F0" d="M 173 88.12 C 178.328 88.12 178.328 96.12 173 96.12 C 167.672 96.12 167.672 88.12 173 88.12 Z"></path><path fill="#3090F0" d="M 87 152.8 C 92.328 152.8 92.328 160.8 87 160.8 C 81.672 160.8 81.672 152.8 87 152.8 Z"></path><path fill="#3090F0" d="M 5 193.96 C 10.328 193.96 10.328 201.96 5 201.96 C -0.32800000000000007 201.96 -0.32800000000000007 193.96 5 193.96 Z"></path></g></g><text x="300" text-anchor="middle" class="highcharts-title" style="color:#197DE1;font-size:26px;font-weight:normal;fill:#197DE1;width:536px;" y="32"><tspan>Accounting Entries</tspan></text><g class="highcharts-legend" transform="translate(223,358)"><rect x="0" y="0" width="155" height="27" rx="5" ry="5" fill="rgb(255,255,255)" fill-opacity="0.90" visibility="visible"></rect><g><g><g class="highcharts-legend-item" transform="translate(8,3)"><path fill="none" d="M 0 13 L 16 13" stroke="#3090F0" stroke-width="2"></path><path fill="#3090F0" d="M 8 9 C 13.328 9 13.328 17 8 17 C 2.6719999999999997 17 2.6719999999999997 9 8 9 Z"></path><text x="21" style="color:#808080;font-size:14px;font-weight:normal;cursor:pointer;fill:#808080;" text-anchor="start" y="17"><tspan>Accounting Entries</tspan></text></g></g></g></g><g class="highcharts-axis-labels highcharts-xaxis-labels"><text x="101.81515351681537" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:93px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="323" opacity="1"><tspan>Aug 2017</tspan></text><text x="187.29744963934903" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:93px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="323" opacity="1"><tspan>Sep 2017</tspan></text><text x="270.0222523385752" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:93px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="323" opacity="1"><tspan>Oct 2017</tspan></text><text x="355.5045484611088" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:93px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="323" opacity="1"><tspan>Nov 2017</tspan></text><text x="438.22935116033494" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:93px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="323" opacity="1"><tspan>Dec 2017</tspan></text><text x="523.7116472828686" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:93px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="323" opacity="1"><tspan>Jan 2018</tspan></text></g><g class="highcharts-axis-labels highcharts-yaxis-labels"><text x="60" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="307" opacity="1"><tspan>0</tspan></text><text x="60" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="258" opacity="1"><tspan>25</tspan></text><text x="60" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="209" opacity="1"><tspan>50</tspan></text><text x="60" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="160" opacity="1"><tspan>75</tspan></text><text x="60" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="111" opacity="1"><tspan>100</tspan></text><text x="60" style="color:#808080;cursor:default;font-size:14px;font-weight:normal;fill:#808080;width:188px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="62" opacity="1"><tspan>125</tspan></text></g><g class="highcharts-tooltip" style="cursor:default;padding:0;pointer-events:none;white-space:nowrap;" transform="translate(0,-9000000000)"><path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"  stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path><path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"  stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path><path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"  stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path><path fill="#FFFFFF" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"></path><text x="8" style="font-size:12px;color:#333333;fill:#333333;" y="20"></text></g><text x="590" text-anchor="end" style="cursor:pointer;color:#808080;font-size:14px;fill:#808080;" y="395"></text></svg>

看起来SVG文件中引起问题的部分是：

<g class="highcharts-tooltip" style="cursor:default;padding:0;pointer-events:none;white-space:nowrap;" transform="translate(0,-9000000000)">
    <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"  stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"/>
    <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"  stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"/>
    <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"  stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"/>
    <path fill="#FFFFFF" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"/>
    <text x="8" style="font-size:12px;color:#333333;fill:#333333;" y="20"/>
</g>

***更新：我发现如果我在运行SVGGenerator之前添加了以下行，以便正确生成JPG，这让我相信SVGGenerator的某个地方存在错误：

configuration.getTooltip().setEnabled(false);

Answer 1

Vaadin Charts的Github Issue与此相关。如果您查看this comment，可以找到以下问题的解决方法：

String svg = SVGGenerator.getInstance().generate(chart.getConfiguration());
svg = svg.replaceAll("translate\\(0,-9000000000\\)", "translate\\(0,-9999\\)");

另外，正如您所提到的，禁用工具提示也可以防止出现此问题。

蜡染从我的svg文件生成一个空白的jpg

1 个答案: