Weird thing while rotating an SVG pie chart

[GreenSnake]

Hi everyone,

 

I'm facing an issue while trying to have a particular SVG group rotating around itself.

The particular SVG group contains a pie chart composed of 4 or 5 arcs, built with Path elements. It is working fine when I have 4 path elements, rotating as expected around its center. It gets complicated when I have 5 elements. In this last case, the center of rotation seems to move in circle as the wheel rotates... I tried with 1, 2, 3, 4, 6, 7+ elements, all working fine, but not with 5.

 

Because I need to just have the SVG group rotating, I can't just make the whole SVG element rotating around itself. Which is sad because I'm not meeting this issue when the whole SVG is rotating.

 

You'll see in the pen () 3 pie charts :

• the blue one has 5 elements, rotating fine because the whole SVG is rotating (which I don't want)
• the pink one has 5 elements with only the svg group rotating. This one has the weird behavior with the rotation
• the green one has 4 elements with only the svg group rotating. This one is rotating as expected.

I need your help for finding why the pink one has its rotation center moving in circle, while the green one is rotating fine...

 

Also, congratulation to the GSAP team for their amazing work!

 

Thank you !

 

(note: I may put things I don't want to see rotating at the center of the pie, this is why I don't want to rotate the whole SVG element)

See the Pen xdVBrr?editors=1010 by CapPat (@CapPat) on CodePen

[PointC]

Hi GreenSnake 

 

Welcome to the forum

 

This looks like it's only happening in Chrome so I'm wondering if you're experiencing a BBox size calculation error on that group. I posted about that here:

 

https://greensock.com/forums/topic/13681-svg-gotchas/?p=71862

 

In your case, it's an easy fix though. Please use svgOrigin rather than transformOrigin like this:

tl.to(div, 5, { clearProps: 'transform', svgOrigin:"319 200", rotation: 360});

From what I can tell, that change seems to fix any strange rotation issues in Chrome and should give you the desired behavior.

 

Here's some more info about svgOrigin:

https://greensock.com/gsap-1-16

 

Hopefully that helps.

 

Happy tweening.

[GreenSnake]

I ran through your post and others about the bbox issue. I sure was far to expect all of it.

I applied your fix, and it works perfectly!

 

Big thanks !