【JavaScript】SVGTool: SVG常用方法库

前言

HTML5经历了几年的沉沦之后引来一轮的潮流。在图形可视化方面，SVG同canvas相比在交互性方面有更大的优势。

市面上成熟的JavaScript框架已有很多，其中多有对SVG的封装。

本篇兼顾易用性和可读性，更适合初学者入门，用于了解SVG的基本原理和超轻量级的库引用（以便后期自主拓展）。

之前封装过一个iOS平台下的canvas绘图（《【iOS】UIWebView的HTML5扩展之canvas篇 》），

本篇则纯粹的从H5的角度对SVG常用方法进行简单封装。

完整源代码下载地址（持续更新）：https://github.com/duzixi/SVGTool

源代码

核心代码：

SVGTool.js

//
// SVGTool.js
// 
// (C) 2015 duzixi.com
// 
// 2015.10.03 Created by 杜子兮
// 
// 封装了常用的SVG方法。
// 包括：基本形状、滤镜、渐变填充等

/* 通用 */

// 命名空间
var XMLNS = "http://www.w3.org/2000/svg";

function svgRootNode(id, width, height) {
	var svgNode = document.createElementNS(XMLNS, "svg");
	svgNode.id = id;
	svgNode.setAttribute("xmlns", XMLNS);
	svgNode.setAttribute("version", "1.1");
	svgNode.setAttribute("width", width);
	svgNode.setAttribute("height", height);
	return svgNode;
}

/* 基本形状 */

// •矩形 
function svgRectNode(id, x, y, rx, ry, w, h, fillColor, strokeWidth, strokeColor){
	var svgNode = document.createElementNS(XMLNS, "rect");
	
	svgNode.id = id;
	
	svgNode.setAttribute("x", x);
	svgNode.setAttribute("y", y);
	svgNode.setAttribute("rx", rx);
	svgNode.setAttribute("ry", ry);
	svgNode.setAttribute("width", w);
	svgNode.setAttribute("height", h);

	svgNode.style.fill = fillColor;
	svgNode.style.stroke = strokeColor;
	svgNode.style.strokeWidth = strokeWidth;

	return svgNode;
}

// •圆形 
//	示例：
function svgCircleNode(id, cx, cy, r, fillColor, strokeWidth, strokeColor){
	var svgNode = document.createElementNS(XMLNS, "circle");
	
	svgNode.id = id;
	
	svgNode.setAttribute("cx", cx);
	svgNode.setAttribute("cy", cy);
	svgNode.setAttribute("r", r);

	svgNode.style.fill = fillColor;
	svgNode.style.stroke = strokeColor;
	svgNode.style.strokeWidth = strokeWidth;

	return svgNode;
}

// •椭圆 
//  示例：
function svgEllipseNode(id, cx, cy, rx, ry, fillColor, strokeWidth, strokeColor) {
	var svgNode = document.createElementNS(XMLNS, "ellipse");
	
	svgNode.id = id;
	
	svgNode.setAttribute("cx", cx);
	svgNode.setAttribute("cy", cy);
	svgNode.setAttribute("rx", rx);
	svgNode.setAttribute("rx", rx);

	svgNode.style.fill = fillColor;
	svgNode.style.stroke = strokeColor;
	svgNode.style.strokeWidth = strokeWidth;

	return svgNode;
}

// •线 
// 示例：
function svgLineNode(id, x1, y1, x2, y2, strokeWidth, strokeColor){
	var svgNode = document.createElementNS(XMLNS, "line");
	
	svgNode.id = id;
	
	svgNode.setAttribute("x1", x1);
	svgNode.setAttribute("y1", y1);
	svgNode.setAttribute("x2", x2);
	svgNode.setAttribute("y2", y2);

	svgNode.style.stroke = strokeColor;
	svgNode.style.strokeWidth = strokeWidth;

	return svgNode;

}

// •多边形 
// 示例：
function svgPolygonNode(id, points, fillColor, strokeWidth, strokeColor){
	var svgNode = document.createElementNS(XMLNS, "polygon");
	
	svgNode.id = id;
	
	svgNode.setAttribute("points", points);

	svgNode.style.fill = fillColor;
	svgNode.style.stroke = strokeColor;
	svgNode.style.strokeWidth = strokeWidth;

	return svgNode;
}

// •折线 
// 示例：
function svgPolylineNode(id, points, fillColor, strokeWidth, strokeColor){
	var svgNode = document.createElementNS(XMLNS, "polyline");
	
	svgNode.id = id;
	
	svgNode.setAttribute("points", points);

	svgNode.style.fill = fillColor;
	svgNode.style.stroke = strokeColor;
	svgNode.style.strokeWidth = strokeWidth;

	return svgNode;

}

// •路径 
/*
下面的命令可用于路径数据：
•M = moveto
•L = lineto
•H = horizontal lineto
•V = vertical lineto
•C = curveto
•S = smooth curveto
•Q = quadratic Belzier curve
•T = smooth quadratic Belzier curveto
•A = elliptical Arc
•Z = closepath
*/

// 示例：
/* 螺旋

*/
function svgPathNode(id, d, strokeWidth, strokeColor) {
	var svgNode = document.createElementNS(XMLNS, "path");
	
	svgNode.id = id;
	
	svgNode.setAttribute("d", d);

	svgNode.style.stroke = strokeColor;
	svgNode.style.strokeWidth = strokeWidth;

	return svgNode;
}

/* 滤镜 */
// 说明：滤镜是CSS的一种样式，两者配合使用，效果最佳。

/* 在 SVG 中，可用的滤镜有：
•feBlend
•feColorMatrix
•feComponentTransfer
•feComposite
•feConvolveMatrix
•feDiffuseLighting
•feDisplacementMap
•feFlood
•feGaussianBlur
•feImage
•feMerge
•feMorphology
•feOffset
•feSpecularLighting
•feTile
•feTurbulence
•feDistantLight
•fePointLight
•feSpotLight
*/

// 高斯模糊
// 示例：
// SVG:
//	   
// CSS:
//	   filter:url(#Gaussian_Blur);
function filterGuassianBlur(id, r) {
	var filter = '';
	filter += '';
	return filter;

}

// 添加文字

/* 渐变填充 */
// 说明：渐变填充是一种自定义的特殊颜色，可以直接作为参数传入上面的函数中使用，也可在CSS中指定使用。

// 线性渐变
// 示例：
// SVG:
	// 
	// 
	// 
	// 
	// 
	// 
// CSS:
	// fill:url(#orange_red)
function fillLinearGradient(id, x1, y1, x2, y2, offsets, colors) {
	var fill = '';
	fill += '';

	for(var i = 0; i < offsets.length; i++){
		fill += ' ';
	}

	fill += '';
	fill += '';
	return fill;
}

调用方法：

SVGToolDemo.html

后语

SVG节点创建方式是要格外注意的地方，必须用有命名空间的方式。