0

Svg.js animation of rotations works great because it uses the center point of the element by default, even when the element is moving from one spot to another, but now I'm having trouble when I add a clipping path to an image, because the center point is still the center of the original image, even if it is outside of the clipping path. I would like to use the center point of the clipping path instead. The closest thing I could find was a question about d3.js.

var rect = draw.rect(60,60)
var picture = draw.image(img.jpg).clipWith(rect)
picture.animate(1000).rotate(360)

How can I get it working in svg.js?

Community
  • 1
  • 1
Iktys
  • 840
  • 1
  • 8
  • 17

1 Answers1

1

You can pass a centre of rotation to the rotate() method. All you have to do is work out where the centre of the clip rect is and pass that in. It works out to be 90,80.

this.animate(1000).rotate(
    360 + currentRotation, 90,80
)

Demo here

For some reason it doesn't work the first time, but after that it works fine. That seems like a bug in svg.js.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • After much experimentation http://jsfiddle.net/heyzeuss/evL6v/18/, I found that the object SVG.rbox will get me the center point, but only at the beginning of the animation. If I want the clipped element to move from point 'A' to point 'B' it does not anymore rotate about its own center. The center of rotation *should* move with the element, as in the first example of the question. – Iktys May 15 '14 at 12:01
  • The mentioned bug was fixed a while ago – Fuzzyma Oct 14 '15 at 22:15