Svg.Js 父类的基础操作-CSDN博客

一、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>