Jump to content
Search Community

SVG-element not rotating around SVG center

grizhlie test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hiya, hopefully a simple one that I'm messing up.

 

I exported the SVG from Affinity Designer 2, not sure if that means anything. I don't think it exports things as well to SVG as illustrator (it chooses "circle" over a "path" for example).

 

I just want the element with "#moon-1" to rotate around the "planet". I looked around and tried to copy other solutions but I think there's just something fundamental I don't understand. Any clue as to what it is?

This code doesn't LOOK wrong but I'm clearly missing something...

 

//Moons

gsap.to("#moon-1", {
  duration: 10,
  rotation: 360,
  svgCenter: "200px 200px",
  repeat: -1,
  ease: Power0.easeNone
});

 

Thank you.

Edit: If anyone has a tool that is great to create SVGs with that is NOT Adobe Illustrator, I'm open to suggestions. I don't think SVGs are Affinity's strength.
 

See the Pen VwEVLWN?editors=1010 by grizhlie (@grizhlie) on CodePen

Link to comment
Share on other sites

  • Solution

Hey there @grizhlie

 

It sounds like you are actually looking for svgOrigin - there is no such thing as svgCenter, afaik.

 

https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin#h3-svgorigin

 

I'm not entirely sure why, but even if I set that to "200 200" which is supposed to be the center of your SVG, it doesn't align properly - very likely because of the transforms you have on your moon - so you might want to rework that in your SVG Editor.

 

I do recall, that Affinity Designer v1 had an option to flatten transforms on export; so you might want to look for that option in v2, too - maybe it solves that problem for you.

 

Apart from that, setting the svgOrigin to "180 180", appears to be working fine in your case, though.

 

I hope this will help a bit at least. Happy rotating!

 

See the Pen mdzQWyp by akapowl (@akapowl) on CodePen

 

 

 

P.S.: You might also want to consider updating your syntax to the newer v3 syntax (e.g. with regard to durations and eases); although it is still supported, support for the old v2 syntax might get erased in a major future version of GSAP at some point.

 

 

 

  • Like 4
Link to comment
Share on other sites

@akapowl Thanks a ton, super helpful! I'll follow everything you said. 

 

And of course I MADE UP a property, it's a very "me" thing to do 😅...

 

Thanks for everything. I'll redo, learn what I can and will post an improved version as a mini case study of sorts. 

 

Appreciate it.

  • Like 1
  • Haha 1
Link to comment
Share on other sites

1 minute ago, grizhlie said:

And of course I MADE UP a property, it's a very "me" thing to do 😅...

 

Been there, done that ... but in hindsight it's always funny to see what naming ideas you can come up with, when you need it the least 😅

 

 

3 minutes ago, grizhlie said:

Thanks for everything. I'll redo, learn what I can and will post an improved version as a mini case study of sorts. 

 

Happy to help. That'd be great for others to see. Good luck with the project  👍 

 

 

  • Like 1
Link to comment
Share on other sites

Alright.

  • Updated the syntax to v3
  • Flattened the SVG on export in Affinity Designer (2) (I apparently did not know what "flatten" actually means)
  • Adjusted the gradient color as it was far too dark 
  • Updated everything to svgOrigin 🙃
  • I did not have to change the 200px part, so I guess you were correct regarding flattening the SVG? Don't really understand that but that's ok for today.

 

See the Pen gOBQmvQ?editors=1010 by grizhlie (@grizhlie) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks @Cassie. After this post I ended up researching SVG's a bit more. It was less about the tool and more about who was using it.

Thanks for the tip on relative-paths, don't really know what that means (yet) but I'll look into it now with a few exports. 

 

Appreciate the help :)

  • Like 1
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.
×
×
  • Create New...