_{Snap.svg demo之}Matrix.add()

Matrix.add(…)

给现有矩阵再添加一个矩阵。

参数

• a 数值。
• b 数值。
• c 数值。
• d 数值。
• e 数值。
• f 数值。

以上a~f的矩阵参数含义可参见理解CSS3 transform中的Matrix(矩阵)一文中的说明。

或者

• matrix 对象。矩阵对象。

返回值

对象。元素。

使用

<svg id="svg" width="120" height="120"></svg>

var svg = Snap("#svg");
// 画个圈圈
var c = svg.paper.circle(50, 50, 40);
// 当前矩阵
var m1 = new Snap.Matrix(1,0,0,1,20,20);
// 圈圈应用矩阵变换 - 位移(20, 20)
c.transform(m1.toTransformString());

// 事件
if (document.addEventListener) {
    document.querySelector("#button").addEventListener("click", function() {
        // 矩阵组合
        m1.add(1,0,0,1,-20,-20);
        // 圈圈再次应用矩阵变换 - 位移(-20, -20)
        c.transform(m1.toTransformString());
    });
}

效果