Jump to content


Programmatic SVG not rendering correctly

Recommended Posts



While this is not directly related to GSAP,  I'm working within that framework but have removed the Draggable config for clarity.  You guys are the most clued in crowd I've found in relation to this kind of stuff so thought I'd see if anyone has any thoughts.


In the code pen above I've got two divs containing a simple SVG.  One of the div/svg combos is created manually, the second is created programmatically.  The manual div/svg renders exactly as expected, while the text element of the second does not.


Using the element inspector in Chrome, the elements appear identical (except for the names) however looking at the computed styles seems to show attributes missing from the generated SVG.  If you use the Chrome inspector to copy the text element from the first div into the second, it will show correctly while the second original still does not.


Would hugely appreciate any insights!


Shaun Hurley

Comparison of Test 1 & Test 2.JPG

Inspection of Test 1.JPG

Inspection of Test 2.JPG

See the Pen ZxLggP?editors=1010 by shaunhurley (@shaunhurley) on CodePen

Link to comment
Share on other sites

SVG elements are created differently than html elements. Using vanilla js you create html elemnts using,


var elem = document.createElement('div');


While you create svg you use following syntax,


var elem = document.createElementNS("http://www.w3.org/2000/svg", "text");



I did quick search to see if jQuery supports creating svg elements but didn't find anything. Here is how you can create your element while still using jQuery. Also, from wherever you forked this demo, it is using really old version of Draggable.


See the Pen VXpwXV?editors=0010 by Sahil89 (@Sahil89) on CodePen


  • Like 5
Link to comment
Share on other sites

@Sahil many thanks! Just what I needed, super appreciated!


And yes, that is old draggable, I started from an old test pen when I was troubleshooting this, then didn’t update it coz I wasn’t using Draggable in his context.


thanks again!

  • Like 2
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.