Jump to content


Dynamically generated SVG works but doesn't work

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

This is strange. Maybe someone has encountered this before. The codepen for this post is based on this one from some time ago:

See the Pen dXqaZd?editors=1010 by swampthang (@swampthang) on CodePen


The only difference in that one and the one I added as the Codepen for this post is I'm dynamically generating a simple SVG and attaching the transform handles rather than starting out with an SVG and transform handles already there. You can see what was there in the HTML commented out. The structure is exactly the same - an SVG container that has a group inside it containing the main SVG - the one I'm dynamically generating. 


The old version, with the SVG already in place, had the function setTransforms() which is the same in this new version. The new functions are:


The first one creates the SVG and appends it as a child of the group container. The setHandles function adds the transform handles. When you click the Make Circle button, everything seems to work fine except for the resize Draggable. The crazy thing is, I can see the transform being added but it's not being calculated accurately. 


Here's the thing that's really puzzling me. If I go into Debug mode in the Codepen and edit the dynamically created SVG with the circle by adding...


...to the SVG, it starts working. But I tried adding that dynamically and it didn't make any difference. In fact, if I add it dynamically as part of the creation of the SVG, it still doesn't work. But, as in the first example, if I edit the SVG in Inspector by actually deleting the xmlns ="http://www.w3.org/2000/svg" it starts working again.


It seems like a timing issue to me but what's crazy is Draggable is applying a transform - just not the correct one. 

See the Pen pEoQAg?editors=1010 by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

Hey Carvel,


Was I supposed to call you back? I can get easily sidetracked and forget to follow up on stuff, but I might have something for you. I was working on a small library to help create and interact with SVG elements including transform boxes. Unfortunately, it depends on a GSAP tool that isn't going to be released, so I haven't touched it in a very long time.




I might be able to patch parts of it using this polyfill. I'll post back here later.


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.