0

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

enter image description here

Francis Hemsher
  • 3,478
  • 2
  • 13
  • 15

2 Answers2

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.

Community
  • 1
  • 1
Ian
  • 13,724
  • 4
  • 52
  • 75
  • OK I see. e.g. Matrix.x(30,30) and Matrix.y(30,30) in the example, is a point at the lower right of the rect. Thanks! – Francis Hemsher Apr 04 '17 at 13:12
  • Yes, sorry, I misread your last line of code actually, and see now why you were reading it differently. – Ian Apr 04 '17 at 14:14
0

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

Dan D.
  • 73,243
  • 15
  • 104
  • 123