_{Snap.svg demo之}Element.after()

Element.after(el)

给定元素插入到当前元素的后面。也就是el到Element的后面。

参数

• el 元素。要插入的元素。

返回值

元素。返回父元素。

使用

<svg id="svg" width="200" height="100"></svg>
            
<input id="button" type="button" value="点击改变圈圈的顺序">

var svg = Snap("#svg");
var c1 = svg.paper.circle(50, 50, 40).attr({
    fill: "#f00"	// 红色
});
var c2 = svg.paper.circle(100, 50, 40).attr({
    fill: "#00f"	// 蓝色
});

// 事件
document.querySelector("#button").addEventListener("click", function() {
    c2.after(c1);	
});

效果

HTML变化

默认：

点击按钮后：