Snap.svg: What does Matrix.x(x,y) provide?

Question

Below is an example of using Snap.svg's Matrix.x(x,y) and I'm trying to determine how it is used. After creating the Matrix transforms below(see image), and requesting the Matrix.x(50,50), it returns a value of 315.47+. What is that value?

Thanks

    var SNPsvg = Snap("#mySVG");
     //---square, center(0,0)---
    var rect = SNPsvg.rect(-30,-30,60,60).attr({fill: 'blue' });

    var myMatrix = Snap.matrix();
    myMatrix.translate(200,100)
    myMatrix.scale(2,1.5)
    myMatrix.skew(30,45)
    myMatrix.rotate(30)
    rect.transform(myMatrix)

    var mX1=myMatrix.x(50,50)//--if add translate (50,50) ??---

Answer 1

Its the value of x when transformed by that matrix!

Typically you will use it alongside y,

var TransformedPt = {
  x: Matrix.x(x,y),
  y: Matrix.y(x,y),
}

However, I would first look into Snaps transform strings, as they are often easier. For example..

rect.transform('t200,200r30s2,3')

Would transform the rect, translating 200,200, rotating (around center) 30 degrees, and then scaling x,y 2,3

It's there to help avoid the need for dealing with matrices. See here also.

Answer 2

The documentation states that Matrix.x(x, y):

Returns x coordinate for given point after transformation described by the matrix.

From http://snapsvg.io/docs/#Matrix.x