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进行操作。
分享到：
相关推荐
SVG图像生成示例是利用C#编程语言实现的一种高效解决方案，特别针对网页地图中大量数据点的渲染问题。SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它能够提供清晰、无损的图像质量，无论放大多少...
本文旨在探讨如何利用SVG技术生成地图，并分析其优势及应用场景。 #### SVG概述 SVG是一种基于XML的矢量图形标准，由W3C（World Wide Web Consortium）制定。它允许开发者创建高质量的二维图形，支持矢量图形、...
总的来说，"table.svg"是一个创新且实用的前端工具，它将SVG的矢量特性与JavaScript的动态能力相结合，提供了灵活的动态表格解决方案，对于提升网页数据展示的用户体验有着显著的作用。无论是开发者还是设计师，都...
电力SVG图形浏览程序源代码是一个项目，用于展示和解析SVG（Scalable Vector Graphics）图形，尤其适用于处理来自南瑞的...通过研究这个项目，你可以提升自己的编程技能，同时为电力行业的图形展示和分析提供解决方案。
在Java编程中，生成SVG（Scalable Vector Graphics）饼图是一种常见的需求，特别是在数据分析和可视化应用中。SVG是一种基于XML的矢量图像格式，它允许图像无损缩放，适用于网页和其他需要高质量图像的场景。...
并在知识库的指导下利用分析结果，根据SVG模板动态生成相应的SVG文档给用户提供显示。给出了采用这一方案的肠道微生物信息网络图的生成和显示模块的设计与实现，最后给出实际应用的效果。该系统的实施能给肠道微生物...
- 对于源码感兴趣的开发者，可以深入研究html2svg的实现，了解HTML解析、DOM操作和SVG生成的具体步骤。 - 源码可能采用JavaScript或TypeScript编写，利用了DOM API和SVG的相关库。 6. **优化和性能**： - 转换...
该项目是关于基于ASP.NET技术构建一个使用SVG（Scalable Vector Graphics）进行自动站雨量分析的系统。ASP.NET是一个强大的Web应用程序框架，由微软开发，用于构建动态、数据驱动的Web应用程序。SVG则是一种可缩放...
本文将深入探讨一个创新性的解决方案——基于SVG（Scalable Vector Graphics）的自动站雨量分析系统的设计。SVG是一种基于XML（Extensible Markup Language）的矢量图形描述语言，它能够提供高质量的图形渲染，且...
本文介绍了一种基于Java 2 Micro Edition (J2ME) 和 Mobile Scalable Vector Graphics (MobileSVG) 的校园地图服务的设计与实现方案。该方案不仅充分利用了J2ME平台的优势，还借助MobileSVG技术有效地解决了地图数据...
源代码部分可能包括了数据连接模块（与自动气象站通信）、数据处理模块（统计和分析降雨量）、SVG生成模块（将数据转化为图形）和用户界面模块（展示结果）。通过阅读源代码，开发者可以深入理解如何在ASP.NET中集成...
### SVG画图手册（生物信息分析用）知识点详解 #### 一、引言与网络图像概述 1. **网络上的图像**： ...无论是创建复杂的分子结构图还是进行大规模基因组数据分析，SVG都能够提供高效且美观的解决方案。
总结来说，三电平SVG在Simulink中的仿真模型，结合dq控制策略，为电力系统的无功补偿提供了高效、灵活的解决方案。通过深入理解和运用这一模型，工程师们能够更好地理解和优化SVG的控制策略，以提升电力系统的稳定性...
总的来说，"svgedit-webviewer"是一个基于JavaScript的SVG查看解决方案，它利用SVGEdit的功能，为Web环境提供了方便的SVG图像查看和编辑体验。对JavaScript和SVG技术的深入理解是有效利用这个工具的关键。
转换过程涉及到建立CAD中对象、DXF文件中实体和SVG中元素的对应关系，分析SVG文件的框架和图形元素，解决转换过程中遇到的难点问题，并通过编程实现验证。这个转换过程可以脱离AutoCAD平台，使得转换后的SVG文件具有...
ASP.NET可以通过嵌入SVG代码或者调用JavaScript库（如D3.js，它支持SVG绘制）来生成这些图形。用户可以通过交互式的方式查看不同时间段、不同地区的雨量情况，从而进行深入的分析。 在论文部分，作者可能会详细讨论...
《ASP.NET基于SVG的自动站雨量分析系统》是一篇深入探讨如何利用ASP.NET技术和SVG（Scalable Vector Graphics）图形技术开发一个自动化雨量分析系统的论文。此系统旨在为气象观测提供高效、准确的数据处理和可视化...
3. SVG图形：SVG是一种用于描绘矢量图形的XML标准，它可以无损地缩放图像，且文件大小小，适合用于生成高质量的图表和地图。在本系统中，SVG被用来绘制雨量分布图，可以实现交互式的数据可视化。 4. 数据库管理：...