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

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