Snap.svg - Como o Matrix.add () funciona? - javascript, svg, snap.svg

Eu não consigo entender matematicamente Matrix.add () funciona, o Snap.svg docs diz:

Adiciona a matriz dada ao existente

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 );

meu problema aqui:

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

então, largura e altura finais devem ser 50 + 300 = 350
mas o resultado em console.log = 225

Outra tentativa

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

minha expectativa: 100 + 300 = 400
mas o resultado no console = 900!

esta demonstração

Respostas:

1 para resposta № 1

Depois de

mat.scale(.5)

mat é agora uma matriz de escala de 0,5 (s0,5)

Então pegamos a matriz s0.5 e fazemos

mat.add(mat.scale(3))

então isso é

s1.5.add (s1.5)

e 1,5 x 1,5 = 2,25

QED

O outro exemplo é o mesmo 3 x 3 = 9

---