SVG.JS是一个轻量级的对SVG操作的库。
（1）创建一个矩形
首先，创建一个id为drawing的div，用来作为画图的面板，然后调用 var draw = SVG().addTo(‘#drawing‘); 在画板上添加SVG
接下来电泳rect() 方法创建矩形。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/svg.js/3.0.9/svg.min.js"></script>
</head>
<body>
<div id="drawing">
</div>
<script>
var draw = SVG().addTo(‘#drawing‘);
draw.rect(100, 100).move(100, 50).fill(‘#f06‘)
</script>
</body>
</html>
运行后，一个矩形就出来了。
（2）使用另外一个方法
你也可以使用如下方法创建矩形
var draw = SVG().addTo(‘body‘).size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: ‘#f06‘ })
（3）等待DOM加载完毕
SVG.on(document, ‘DOMContentLoaded‘, function() {
var draw = SVG().addTo(‘body‘)
})
SVG提供了如下几个方法
// 创建一个新的SVG var draw = SVG() // 获取SVG DOM var rect = SVG(‘#myRectId‘) // 获取SVGDOM var rect = SVG(‘rect‘)
// 利用CSS选择器获取SVG var path = SVG(‘#group1 path.myClass‘) // 从ragment创建新的SVG var circle = SVG(‘<circle>‘) //把节点转换为SVG var obj = SVG(node)