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 入门教程的主要内容,如果未能解决你的问题,请参考以下文章

markdown 打字稿...编码说明,提示,作弊,指南,代码片段和教程文章

推荐net开发cad入门阅读代码片段

片段 getActivity 不起作用

最全最详细publiccms常用的代码片段

Atom编辑器入门到精通 Atom使用进阶

最全最详细publiccms其他常用代码片段(内容站点)