Dynamically generated SVG works but doesn't work

[swampthang]

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:

addCircle();
setHandles();

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...

xmlns="http://www.w3.org/2000/svg"

...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

[OSUblake]

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.

http://greensock.com/forums/topic/9111-extend-hittest-functionality-to-all-of-greensock/?p=36619

http://greensock.com/forums/topic/10018-docs-request-for-new-plugins/?p=60945

 

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

http://greensock.com/forums/topic/13681-svg-gotchas/?p=57453