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)

　　

posted @ 2021-06-08 06:34  启明星工作室  阅读(749)  评论(0)    收藏  举报