Search the Community
Showing results for tags 'dynamic svg'.
Found 1 result
-
This is strange. Maybe someone has encountered this before. The codepen for this post is based on this one from some time ago: http://codepen.io/swampthang/pen/dXqaZd?editors=1010 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.
