svg生成议案分析
svg生成方案分析
svg生成方案分析
--》方案一：利用batik
生成的svg
--》方案二：利用svg.js类库
对svg.js类库测试的一个例子
--》总结：
svg生成关键是看从什么源生成，如果源是java的原始图形生成svg，最好用batik实现，因为有大量的方法是直接利用java的原始图型生成，否则的话基本可以用dom操作进行svg生成。svg.js也可以作为一个生成方案，但最好是从外部生成svg文件，利用svg.js进行操作。
svg生成方案分析
--》方案一：利用batik
package com.test;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStreamWriter;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;
import org.apache.batik.dom.svg.SVGDOMImplementation;
import org.apache.batik.svggen.SVGGraphics2D;
import org.apache.batik.svggen.SVGGraphics2DIOException;
import org.w3c.dom.DOMImplementation;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
public class BatikTest {
private Document doc;
private String svgNS;
public BatikTest(){
DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();
svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI;
doc = impl.createDocument(svgNS, "svg", null);
}
//创建 svg 根节点
public Element getSvgRoot(){
Element svgRoot = doc.getDocumentElement();
svgRoot.setAttributeNS(null, "width", "400");
svgRoot.setAttributeNS(null, "height", "450");
//加入自定义属性
// svgRoot.setAttributeNS(null,"desc", "xx电厂");
svgRoot.setAttributeNS(null,"desc", "xx哈哈");
return svgRoot;
}
public Element buildNode(String nodeName){
Element e = doc.createElementNS(svgNS, nodeName);
return e;
}
public Element buildNode(String nodeName,String atrrName,String atrrValue){
Element e = doc.createElementNS(svgNS, nodeName);
e.setAttribute(atrrName, atrrValue);
return e;
}
public Element buildNode(String nodeName, Map<String,String> attrMap){
Element e = doc.createElementNS(svgNS, nodeName);
if(attrMap != null && attrMap.size()>0){
Set<String> key = attrMap.keySet();
for(Iterator it = key.iterator(); it.hasNext();){
String atrrName = (String) it.next();
String atrrValue = attrMap.get(atrrName);
e.setAttribute(atrrName, atrrValue);
}
}
return e;
}
public static void main(String[] args) throws IOException {
BatikTest bt = new BatikTest();
// Get the root element (the 'svg' element).
Element svgRoot = bt.getSvgRoot();
Element defs = bt.buildNode("defs",null);
//style
Element style = bt.buildNode("style", "type","text/css");
defs.appendChild(style);
Element g_head_Layer = bt.buildNode("g","id","Head_Layer");
Map<String,String> rectAtrrMap = new HashMap<String, String>();
rectAtrrMap.put("x", "10");
rectAtrrMap.put("y", "20");
rectAtrrMap.put("width", "100");
rectAtrrMap.put("height", "200");
rectAtrrMap.put("fill", "red");
Element rectangle = bt.buildNode("rect", rectAtrrMap);
g_head_Layer.appendChild(rectangle);
svgRoot.appendChild(defs);
svgRoot.appendChild(g_head_Layer);
SVGGraphics2D g = new SVGGraphics2D(bt.doc);
try {
FileOutputStream fos = new FileOutputStream("E:\\workspace\\batikTest\\xx.svg");
OutputStreamWriter osw = new OutputStreamWriter(fos, "UTF-8");
g.stream(svgRoot,osw);
// g.stream(svgRoot,new OutputStreamWriter(new FileWriter("E:\\workspace\\batikTest\\xx.svg"),"utf-8"));
} catch (SVGGraphics2DIOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
// System.out.println(doc.getXmlVersion());
}
}
生成的svg
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg contentScriptType="text/ecmascript" width="400" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" contentStyleType="text/css" desc="xx哈哈" height="450" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" version="1.0"
><defs
><style type="text/css" xml:space="preserve"
/></defs
><g id="Head_Layer"
><rect x="10" fill="red" width="100" y="20" height="200"
/></g
></svg
>
--》方案二：利用svg.js类库
对svg.js类库测试的一个例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="./js/svg.js"></script>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript">
function loadHandler() {
var draw = SVG('canvas').size(300, 300);
// var rect = draw.rect(100, 100).attr({ fill:'#f06' });
// var ellipse = draw.ellipse(200, 100);
// var circle = draw.circle(100);
// var line = draw.line(0, 0, 100, 150).stroke({ width: 1 })
// var polyline = draw.polyline('0,0 100,50 50,100').fill('none').stroke({ width: 1 })
// var polygon = draw.polygon('0,0 100,50 50,100').fill('none').stroke({ width: 1 })
// var path = draw.path('M10,20L30,40')
// var image = draw.image('img/0.png', 200, 200).move(100, 100);
// var text = draw.text("Lorem\n ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.");
/*
var text = draw.text(function(add) {
add.tspan('Lorem ipsum dolor sit amet ').newLine()
add.tspan('consectetur').fill('#f06')
add.tspan('.')
add.tspan('Cras sodales imperdiet auctor.').newLine().dx(20)
add.tspan('Nunc ultrices lectus at erat').newLine()
add.tspan('dictum pharetra elementum ante').newLine()
})
*/
/*
var text = draw.text(function(add) {
add.tspan('We go ')
add.tspan('up').fill('#f09').dy(-40)
add.tspan(', then we go down, then up again').dy(40)
})
text.path('M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100')
.font({ size: 42.5, family: 'Verdana' });
*/
/*
var rect = draw.rect(100, 100).fill('#f09')
var use = draw.use(rect).move(200, 200)
*/
/*
var draw = SVG('canvas')
var group = draw.group().attr('class', 'my-group')
var rect = group.rect(100,100).attr('class', 'my-element')
var circle = group.circle(100).attr('class', 'my-element').move(100, 100)
var elements = $('#canvas g.my-group .my-element').each(function() {
this.instance.animate().fill('#f09')
})
*/
/*
var rect = draw.rect(100, 100);
rect.attr({
fill: '#f06'
, 'fill-opacity': 0.5
, stroke: '#000'
, 'stroke-width': 10
})
*/
/*
var rect = draw.rect(100, 100);
rect.attr('transform', 'translate(200,200) scale(1,2) rotate(45,0,0)')
*/
/*
var rect = draw.rect(100, 100);
rect.style('cursor:pointer;fill:#f03;')
*/
var rect = draw.rect(100, 100);
// rect.fill({ color: '#f06', opacity: 0.6 })
// rect.stroke({ color: '#f06', opacity: 0.6, width: 5 })
// rect.opacity(0.5);
// rect.skew(0, 45)
/*
var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: '#fff' })
rect.maskWith(ellipse)
*/
/*
var rect2 = draw.rect(200, 200);
rect2.style('cursor:pointer;fill:#f03;')
rect.front();
*/
/*
var group = draw.group()
group.add(rect);
*/
/*
// create some elements
var circle = draw.circle(100).move(100,100).fill('#f09')
// create a set and add the elements
var set = draw.set()
set.add(rect).add(circle)
set.fill('#ff0')
set.each(function(i) {
this.attr('id', 'shiny_new_id_' + i)
})
*/
/*
rect.click(function() {
this.fill({ color: '#f06' })
alert("ok?");
})
*/
/*
rect.data('key', { value: { data: 0.3 }})
console.log(rect.data('key'));
*/
}
</script>
</head>
<body onload="loadHandler()">
<div id="canvas"/>
</body>
</html>
--》总结：
svg生成关键是看从什么源生成，如果源是java的原始图形生成svg，最好用batik实现，因为有大量的方法是直接利用java的原始图型生成，否则的话基本可以用dom操作进行svg生成。svg.js也可以作为一个生成方案，但最好是从外部生成svg文件，利用svg.js进行操作。