svg.js中文API 简易版

2019独角兽企业重金招聘Python工程师标准>>>

svg.js是一个轻量级的操纵和制作SVG动画的js插件库。svg.js没有任何的外部依赖，它遵循麻省理工学院的许可（ MIT License）下许可证的条款。

使用方法

插入一个SVG

可以使用SVG()方法在指定的元素中创建一个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，你也可以测试浏览器是否支持SVG：

if (SVG.supported) {   var draw = SVG('drawing')   var rect = draw.rect(100, 100) } else {   alert('SVG not supported') }

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>

子像素的偏移修正

默认情况下子像素的偏移是不正确的，你可以通过fixSubPixelOffset()方法来修正它：

var draw = SVG('drawing').fixSubPixelOffset()

父元素

主SVG文档

svg.js初始化时在给定的元素中创建一个SVG根元素，并通过SVG.Doc返回该SVG对象的实例。

var draw = SVG('drawing') //returns: SVG.Doc

JavaScript继承堆栈:SVG.Doc < SVG.Container < SVG.Parent

嵌套SVG

你可以通过该特性来在一个SVG中嵌套另一个SVG。嵌套SVG和顶级SVG拥有相同的特性。

var nested = draw.nested() var rect = nested.rect(200, 200) //returns: SVG.Nested

JavaScript继承堆栈:SVG.Nested < SVG.Container < SVG.Parent

SVG组

如果你想转换一组元素为一个SVG，可以使用SVG组特性。组中的所有元素的位置都相对于包含它的组。组中的元素拥有和根