3

I have rotated an SVG path element by setting the attribute transform="rotate(45)"

Now how could i get the rotated SVG path points ?

When i checked the attribute "d" its still showing the original points [ unrotated ].

George Neil
  • 357
  • 1
  • 4
  • 14

2 Answers2

4

if you get point through path.getPointAtLength(), than you need to apply the transformation of the path to result. You get the total transform by:

var t = path.getTransformToElement( path.ownerSVGElement );
var abspoint = path.getPointAtLength( 0.5 ).matrixTransform( t );

I have not testes this,but this might be the way...

That is good for some points on the path. If the whole list of path data should be converted to absolute, than raphael might be the fastest solution...

dom
  • 11,894
  • 10
  • 51
  • 74
philipp
  • 15,947
  • 15
  • 61
  • 106
  • That is a very inefficient way of doing it, basically converts the path into straight line segments. It will also make smooth curves look blocky if you zoom in. – Erik Dahlström Nov 22 '12 at 12:28
  • This worked for me. There is a typo. it should be "matrixTransform". In the sample code 'r' is missing – George Neil Nov 23 '12 at 06:28
3

There's no functionality in svg itself that provides that. Not in jQuery either AFAIK.

The javascript library Raphaël contains a utility method for what you want though, see Raphael.transformPath.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139