0

I have a set of svg points, these points have NOT been plotted yet, I need to rotate and scale the svg FIRST and then plot the polyline points.

How can I convert these points to match the transformation matrix of the svg?

I have done this in the past to get a scaled svg, but do not know the formula for a scaled and/or rotated one.

var matrix = {
      a: 0.948396096937358,
      b: 0,
      c: 0,
      d: 0.951219513081014,
      e: 17.54811715106337,
      f: 72.01952089643697
}

var points = [[317.33, 8.452], [353.037, 8.452], [353.037, 93.952], [317.33, 93.952]];

// newX = x * a + e
// newY = y * d + f


var newX = points[0][0] * matrix.a + matrix.e;
var newY = points[0][0] * matrix.d + matrix.f;

What I need is a new formula to get the scaled and rotated position of each point.

var newScaledRotatedX = ?? var newScaledRotatedY = ??

baskin
  • 139
  • 9
  • Possibly a duplicate of this question [https://stackoverflow.com/questions/33579187/how-can-i-apply-an-svgmatrix-to-an-array-of-points](https://stackoverflow.com/questions/33579187/how-can-i-apply-an-svgmatrix-to-an-array-of-points) – Ted Mar 08 '19 at 20:05
  • Adding the SVG, or a simplified version of it would help a lot. – enxaneta Mar 09 '19 at 09:09

0 Answers0