如何为JFreeChart生成的SVG文件设置宽高属性

问题背景 #

将JFreeChart生成的SVG用于HTML页面时，未设置样式的情况下图像仅显示一半，需要给SVG根元素添加明确的width和height属性。当前代码尝试设置width但未生效，生成的SVG根元素缺少这两个属性。

现有代码 #

DOMImplementation mySVGDOM= GenericDOMImplementation.getDOMImplementation();
/* create Document object */
Document document = mySVGDOM.createDocument(null, "svg", null);
document.createAttribute("width");
document.getDocumentElement().setAttribute("width", "1200px");
/* Create SVG Generator */
SVGGraphics2D my_svg_generator = new SVGGraphics2D(document);
/* Render chart as SVG 2D Graphics object */
chart.draw(my_svg_generator, new Rectangle2D.Double(0,0,1200,480));
/* Write output to file */

my_svg_generator.stream("output_pie_chart.svg");
return IOUtils.readUtf(new File("output_pie_chart.svg"));

问题原因 #

1. 设置属性的时机错误：在创建SVGGraphics2D之前设置SVG根元素属性，后续初始化或绘制过程中可能被覆盖。
2. 未设置height属性，仅设置了width。

解决方案 #

方案一：调整时机通过DOM元素设置宽高 #

在创建SVGGraphics2D之后，再获取SVG根元素设置width和height属性，确保属性不会被后续流程覆盖：

DOMImplementation mySVGDOM = GenericDOMImplementation.getDOMImplementation();
// 创建Document对象
Document document = mySVGDOM.createDocument(null, "svg", null);
// 创建SVG Generator
SVGGraphics2D my_svg_generator = new SVGGraphics2D(document);
// 获取SVG根元素并设置宽高
Element svgRoot = document.getDocumentElement();
svgRoot.setAttribute("width", "1200px");
svgRoot.setAttribute("height", "480px"); // 与绘制时的Rectangle高度对应，可按需调整
// 渲染图表
chart.draw(my_svg_generator, new Rectangle2D.Double(0, 0, 1200, 480));
// 输出文件并返回内容
my_svg_generator.stream("output_pie_chart.svg");
return IOUtils.readUtf(new File("output_pie_chart.svg"));

方案二：使用SVGGraphics2D内置方法（更简洁） #

利用SVGGraphics2D.setSVGCanvasSize()方法直接设置画布大小，该方法会自动为SVG根元素添加对应的width和height属性：

DOMImplementation mySVGDOM = GenericDOMImplementation.getDOMImplementation();
// 创建Document对象
Document document = mySVGDOM.createDocument(null, "svg", null);
// 创建SVG Generator
SVGGraphics2D my_svg_generator = new SVGGraphics2D(document);
// 设置SVG画布大小，自动同步width和height属性
my_svg_generator.setSVGCanvasSize(new Dimension(1200, 480));
// 渲染图表
chart.draw(my_svg_generator, new Rectangle2D.Double(0, 0, 1200, 480));
// 输出文件并返回内容
my_svg_generator.stream("output_pie_chart.svg");
return IOUtils.readUtf(new File("output_pie_chart.svg"));

预期结果 #

生成的SVG根元素会包含指定的宽高属性：

<svg width="1200px" height="480px" fill-opacity="1" ...>

此时在HTML页面中无需额外样式，即可完整显示SVG图像。

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