Snap.svg

Question

我无法从数学上理解 Matrix.add() 的工作原理，Snap.svg 文档说：

Adds the given matrix to existing one

HTML:

<svg id="svgout" width="1000" height="1000" viewBox="0 0 800 800"></svg>

JS:

var paper = Snap("#svgout"); 
var r = paper.rect(0,0,100,100);

var mat = new Snap.matrix();
mat.scale(.5);
mat.add(mat.scale(3));

r.attr({transform: mat});
console.log(r.getBBox().width + "  " + r.getBBox().height );

我的问题在这里：

mat.scale(.5);           // width and height = 50
mat.add(mat.scale(3));   // width and height = 300

所以，最终的宽度和高度应该是 50 + 300 = 350
但结果 console.log = 225

再试一次

mat.scale(1);           // width and height = 100
mat.add(mat.scale(3));  // width and height = 300

我的期望：100 + 300 = 400
但控制台中的结果 = 900 !

这个demo

Answer 1

之后

mat.scale(.5)

mat 现在是比例为 0.5 的矩阵 (s0.5)

然后我们取s0.5矩阵做

mat.add(mat.scale(3))

那就是

s1.5.add(s1.5)

和 1.5 x 1.5 = 2.25

QED

另一个例子同上3 x 3 = 9

Snap.svg - Matrix.add() 是如何工作的？

Snap.svg - How Matrix.add() works?

javascript

svg