2

I'm new to Snap.svg and SVG and experimenting with transformations (an illustraiting plunk can be found here). Basically I'm trying to move, scale and rotate a shape according to its configuration. This is what I've found out so far:

  • rotating around a point is possible with rotate(angle, x, y)
  • there is no direct transform method to scale around a point but it can be done as described in "SVG Essentials"

However combining these transforms doesn't give me the expected result - my expected calculated center of the shape differs from the rendered one. Can anyone give me some pointers on how to correctly put these transforms together?

Regards, Andi

Andi
  • 650
  • 2
  • 8
  • 22
  • Can you include what your method is to calculate the centre of a transformed object it ? If you wanted the centre of a transformed object, I would probably use something like element.getBBox().cx & cy (or possibly element.getBBox(1) if transformed). I would also break it down into a smaller chunk to understand it. Its hard to understand if your problem is your transform is wrong, or just that your centre isn't what you think it is. – Ian Jun 10 '14 at 11:43
  • Well the actual code in the plunk is quite small - and as you can see I compute the center from the initial coordinates which is not difficult since I've stored for the sake of simplicity the width and height. Btw my experience is that element.getBBox() is not a really reliable and from time to time I've got obviously wrong numbers. That's why I've hard coded width and height. This is an another problem to solve... – Andi Jun 10 '14 at 13:01

1 Answers1

3

To combine transforms, I would use Snaps own transformString format. I would first have a read of my previous answer on SO here, this is slightly different so posting a slightly different example and answer.

Whilst Snap can use SVGs transform strings (rotate() scale() transform()). They don't by default centre around itself for example, whereas Snaps (and Raphaels) do. This makes it a bit easier. For more complex situations, one may need to look into Matrix methods, but I think the following should be ok...

Snaps transformString uses string t (transform), s (scale), r (rotate), and you can add them repeatedly if wanted.

Here is an example of both methods, to highlight the difference. jsfiddle here

s = Snap(400, 620);

var r1 = s.rect(0, 0, 100, 100).attr({
    fill : 'blue',
    stroke : 'black',
    opacity: 0.5
});
var r2 = r1.clone().attr({ fill: "red" });

r1.transform('t100,100s2,2r45');   //typical Snap way, rotation/scale around centre
r2.transform('translate(100,100) scale(2,2,) rotate(45)');   //SVG way

The getBBox() method should be pretty reliable as far as I know (maybe post up a separate question on SO if you find an example where it is wrong)

Community
  • 1
  • 1
Ian
  • 13,724
  • 4
  • 52
  • 75
  • Yes the Snap format makes it a lot easier, thanks a lot! For those interested in an AngularJS example of SVG transforms in action - I've updated the [Plunk](http://plnkr.co/edit/myqCJm?p=preview) – Andi Jun 10 '14 at 18:58