Jump to content


Transform PATH within SVG

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

I'm trying to animate a <PATH> within an <SVG> with transform. With the help of another post in the forums, I've managed to get the transform working, but I can't find a way to change the transform origin (css transform-origin doesn't work). It always performs the transform relative to the top left. Here's a basic demo I'm working with at the moment: http://jsbin.com/eyaqOLIY/1/edit?html,js,output


In the final version, I will be manipulating an SVG that is created by another javascript library, so I can't change the HTML output much --- I could add classes and such, but I can't go wrapping things in <G> elements, etc. The final will also have multiple paths within a single <SVG>, that I need to animate seperately, so I can't apply the animation to the SVG. I need to animate the <PATH>.


Any idea how I can animate the path relative to its center rather than the top left (needs to be compatible with IE9 and FF10)?




Link to comment
Share on other sites

Sorry, not really sure what you need for this. Sounds like a limitation of SVG and not something that GSAP can work around. If you can dig up more info please let us know.

Link to comment
Share on other sites

Thanks, Carl. I'll keep looking then. Essentially I just need to transform a shape from its center point rather than from the top left. It doesn't appear that Greensock can do this at the moment. I've looked into other libraries (including D3 and Raphael), but they all appear to have the same behavior. Perhaps just a limitation of SVG as you said. FYI: I've posted a more generic question related to accomplishing this via any library or method on StackOverflow here: http://stackoverflow.com/questions/21412043/how-do-i-rotate-or-scale-transform-an-svg-path-relative-to-its-center-point


Thanks for your help. -Matt

Link to comment
Share on other sites

Unfortunately, I'm working with SVG that gets dynamically added to the DOM by another plugin. Raphael cannot work with SVG that already exists in the DOM. D3 and Snap.svg seem to be my best options for this. I couldn't get D3 to animate from a center pivot point, but I did get Snap to do it. So currently am using Snap for SVG transforms and Greensock for other SVG animations (fills, strokes, etc.). I understand Snap was created by the same author as Raphael. Any plans for a Snap plugin for Greensock (or a fully independent SVG plugin)?

Link to comment
Share on other sites

Also, Check this post



Anthony has been working on modifying the RaphaelPlugin to be Snap-friendly. Drop him a message.


We've been getting a number of requests for some SVG-related tools and we're keeping them in mind. Have a lot brewing at the moment. Thanks for the suggestions.

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.