一、SVG.Doc 创建SVG文档
var draw = SVG('drawing')
<div id="svg1"></div>
<script>
//创建svg,并画出正方形
var draw = SVG('svg1').size(400, 400);
var rect = draw.rect(100, 100).attr({
fill: '#f06'
});
</script>
二、SVG.Nested,SVG的嵌套
<div id="svg1"></div>
<script>
//SVG.Nested 实现嵌套
var draw=SVG('svg1').size(300,300).attr({
stroke:'1px solid red' // SVG 的attr不起作用
});
var nested=draw.nested();
var rect=nested.rect(200,200);
</script>
三、SVG.G ,SVG分组grop
<div id="svg1"></div>
<script>
//SVG.Nested 实现嵌套
var draw = SVG('svg1').size(300, 300); //SVG 的元素分组 使用<p>包裹
var group = draw.group();
var rect = draw.rect(100, 100, 100, 100);
rect.attr({
fill: 'grey'
});
group.add(rect); group.path('M10,20L200,100').attr({
stroke: 'red'
});
</script>
四、SVG.Symbol ,SVG象征符号及使用
<div id="svg1"></div>
<script>
var draw = SVG('svg1').size(300, 300);
//定义不显示的元素象征
//可以用于use使用
var symbol = draw.symbol();
symbol.rect(100, 100).fill('#f09');
var use = draw.use(symbol).move(100, 100);
</script>
五、SVG.Defs ,获取SVG元素的引用
<div id="svg1"></div>
<script>
//SVG.Defs
var draw = SVG('svg1').size(300, 300);
var defs = draw.defs();
console.info(defs);
var rect = draw.rect(100, 100);
var des2 = rect.doc().defs();
</script>
更多: