SVG.js 引用獲取整理

一、SVG.get() 根據id獲取元素

var draw = SVG('svg1').size(300, 300);
var circle = draw.circle(50);
circle.fill('red').move(10, 10);
//添加類
circle.addClass('circle');
//設置ID
circle.id('circle');
//SVG.get() 獲取Element對象
var circle2 = SVG.get('circle');
console.info(circle2);
circle2.stroke({
    color: 'blue',
    width: 2
});

二、SVG.select（）/element.select()  根據CSS選擇器獲取

注：這里的select()方法用於draw、group

var draw = SVG('svg1').size(300, 300);
//SVG.select() 根據類名獲取元素
//element.select() 
var ellipse = draw.ellipse(100, 50);
ellipse.fill('blue');
ellipse.addClass('my-class');
var rect = draw.rect(100, 100);
rect.move(100, 100);
rect.addClass('my-class');
//var elements = SVG.select('.my-class');
var elements = SVG.select('rect.my-class');
elements.fill('#f06');

var group1 = draw.group();
var txt1 = draw.text(function (add) {
    add.tspan('第一行').addClass('words').newLine();
    add.tspan('第二行').addClass('words').newLine();
});
txt1.move(50, 50);
group1.add(txt1);
//這個方法可以使用
group1.select('.words').fill('green');
//這個方法好像已經不可以使用了
//SVG.select('.words', group1).fill('green');

注：關於SVG的原始Dom元素操作、及在JQuery中的使用等此處省略

三、SVG 節點對象獲取

var draw = SVG('svg1').size(300, 300);
//Circular references基礎節點獲取，
var ellipse = draw.ellipse(100, 80);
ellipse.fill('#06f');
//element.node 獲取SVGElement
console.info(ellipse.node); //<ellipse id="SvgjsEllipse1008" rx="40" ry="50" cx="90" cy="100" fill="#0066ff"></ellipse>
//element.native() 獲取element.node
var node = ellipse.native();
console.info(node);
//node.instance 獲取SVG.Element
var elli2 = node.instance;
elli2.size(80, 100).move(50, 50);

四、SVG 根節點下的子節點獲取

var draw = SVG('svg1').size(300, 300);
//SVG根節點下的子節點操作 Child references
//draw.children() 獲取所有子節點
var ellipse = draw.ellipse(200, 150).move(50, 50).fill('#f06');
var rect = draw.rect(50, 50);
var children = draw.children();
//draw.clear() 清空子節點
draw.clear();
//draw.each() 遍歷子節點
draw.each(function (i, children) {
    console.info(i); //當前索引
    console.info(children) //當前children引用
    this.fill('green');
});
//draw.first()/draw.last() 獲取第一個和最后一個
draw.first().stroke({ width: 2 });
draw.last().fill('green');
//draw.get() //獲取指定索引的節點對象
var second = draw.get(1).stroke({ width: 2, color: 'yellow' })
//draw.index() //獲取指定對象的索引 defs元素
var index = draw.index(second);
console.info(index); //1 ,特別說明，第一個元素是
//draw.has() //判斷是否含有指定對象的元素
console.info(draw.has(second)); //true

五、SVG 子節點獲取根節點

var draw = SVG('svg1').size(300, 300);
//SVG子節點獲取父節點引用 Parent references
//element.doc() 獲取draw SVG根節點
var nested = draw.nested().addClass('test');
var group = nested.group();
var rect = draw.rect(100, 100).fill('#f09');
group.add(rect);
var doc = rect.doc().ellipse(50, 100).move(50, 50);
//element.parent() 獲取父節點或篩選父節點
rect.parent()           //-> returns group
rect.parent(SVG.Doc)    //-> returns draw
rect.parent(SVG.Nested) //-> returns nested
rect.parent(SVG.G)      //-> returns group
rect.parent('.test')    //-> returns nested
//element.parents() 獲取父節點數據或者篩選父節點，返回group數組
var group1 = draw.group().addClass('test')
    , group2 = group1.group()
    , rect = group2.rect(100, 100)

rect.parents()        // returns [group1, group2, draw]
rect.parents('.test') // returns [group1]
rect.parents(SVG.G)   // returns [group1, group2]

六. SVG 屬性引用獲取

//SVG URI references
//如果一個元素是通過屬性鏈接到另一個元素，鏈接元素的實例可以拿來與reference()方法。
use.reference('href') //-> returns used element instance
// or
rect.reference('fill') //-> returns gradient or pattern instance for example
// or
circle.reference('clip-path') //-> returns clip instance

更多：

SVG.js Marker標記和自定義標簽

SVG.js Mask覆蓋和ClipPath裁剪

SVG.js 圖案使用和use引用