在项目中用到了amcharts,amcharts图标统计插件是利用SVG实现的,其自带下载png功能,但是不支持IE以下浏览器。因此研究了SVG转换为png,最终实现的效果是将amcharts生成一张png写入一个excel并提供下载。(只支持IE9以上)
1.SVG简介:
SVG 意为可缩放矢量图形(Scalable Vector Graphics)。说白了就是利用xml定义图形。
SVG 使用 XML 格式定义图像。
例如一个简单的圆形:
My first SVG
结果:
注意:如果将SVG的父标签去掉也是正常使用的,比如:(用浏览器打开后缀为下面后缀为SVG的文件)
结果:
但是如果将SVG根标签的xmlns属性去掉是不会显示为图形的,比如:
总结:SVG如果正常显示为图形,需要在SVG根标签引入 xmlns="http://www.w3.org/2000/svg"
2.SVG转换为PNG
会研究前台JS生成和后台利用batik生成png。所有用到的JS以及lib或者其他会在最后提供github连接。
2.1前台转换(不支持IE)
需要的JS:saveSvgAsPng.js ,前台下载也比较简单。支持chrome、firefox等主流浏览器(Ie就不主流了。。。。。)
简单的测试:
My first SVG
download
functiondownloadSvg(){//下载的方法--第一个参数是SVG的顶级元素,第二个参数是文件名字
saveSvgAsPng(document.getElementById("testSvg"),"diagram.png");
}
2.2后台将SVG转换为PNG
(后台转换的时候svgCode的第一个元素必须是svg,而且必须有xmlns属性,而且有一个坑是SVG自带的clippath是小写,导致在裁剪转换的时候识别不了,所以必须将clippath转换为clipPath)
后台转换也就是将SVGCODE转换为PNG,注意SVGCODE是需要xmlns属性的,否则会转换失败。
采用的是batik1.7+JDK7(刚开始采用JDK8+batik1.8的时候转换pdf报错)。
1.依赖的jar包:(commons-io包是为了读取svgcode)
2.工程结构
3. 需要转换的SVGCODE:
直接浏览器打开效果:
4.转换的代码以及测试:
packagecn.qlq.svg2png;importjava.io.ByteArrayInputStream;importjava.io.File;importjava.io.FileOutputStream;importjava.io.IOException;importjava.io.OutputStream;importorg.apache.batik.tr