Jump to content


Weird thing while rotating an SVG pie chart

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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:




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:



Hopefully that helps.


Happy tweening.


  • Like 4
Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.