SVGG.JS 入门教程
Posted 启明星工作室
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SVGG.JS 入门教程相关的知识,希望对你有一定的参考价值。
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)
以上是关于SVGG.JS 入门教程的主要内容,如果未能解决你的问题,请参考以下文章