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组特性。组中的所有元素的位置都相对于包含它的组。组中的元素拥有和根