【JavaScript】SVGTool: SVG常用方法库

最新推荐文章于 2024-07-30 20:03:03 发布

子兮、

最新推荐文章于 2024-07-30 20:03:03 发布

阅读量2.5k

点赞数 1

分类专栏： JavaScript 文章标签： html5 SVG 图形 javascript

本文链接：https://blog.csdn.net/duzixi/article/details/48879309

版权

本文介绍了一个基于JavaScript的SVG图形库SVGTool，它适用于初学者，旨在提供SVG的基本原理和轻量级库的使用。文章讨论了SVG在图形可视化上的交互优势，并对比了与canvas的区别。此外，提供了完整的源代码链接供读者下载学习，特别强调了SVG节点创建时需要注意的命名空间问题。

摘要由CSDN通过智能技术生成

前言

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.setAttrib