入门
准备
SVG.js假定您有一个HTML元素，该元素具有已id创建的属性，可以用作包装器。就像是：
<!DOCTYPE html>
<html>
<head>
<title>SVG.js</title>
</head>
<body>
<div id="drawing"></div>
</body>
</html>
创建一个SVG文档
接下来，使用该SVG()函数在wrapper元素内创建SVG文档：
var draw = SVG('drawing').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })
第一个参数可以是元素的ID或选定元素本身。这将生成以下输出：
<div id="drawing">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<rect width="100" height="100" fill="#f06"></rect>
</svg>
</div>
默认情况下，svg绘图遵循其父级的尺寸，在这种情况下#drawing：
var draw = SVG('drawing').size('100%', '100%')
检查SVG支持
默认情况下，SVG.js假定客户端的浏览器支持SVG。您可以如下测试支持：
if (SVG.supported) {
var draw = SVG('drawing')
var rect = draw.rect(100, 100)
} else {
alert('SVG not supported')
}
等待DOM加载
这对许多人来说似乎很明显，但仍然值得一提。如果将js文件包括在文档的开头，请确保等待DOM加载：
SVG.on(document, 'DOMContentLoaded', function() {
var draw = SVG('drawing')
})
如果您在底部添加了js，这不是问题。
纯SVG
SVG.js也可以在HTML DOM之外的SVG文档中运行，例如：
<?xml version="1.0" encoding="utf-8" ?>
<svg id="drawing" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
<script type="text/javascript" xlink:href="svg.min.js"></script>
<script type="text/javascript">
<![CDATA[
var draw = SVG('drawing')
draw.rect(100,100).animate().fill('#f03').move(100,100)
]]>
</script>
</svg>
