Javascript and SVG

Question

I am trying to dynamically create SVG vectors with Javascript and I'm running into some problems.

I create the svg markup in javascript with document.createElement and append it to a div container. Then I do the same thing and create a rect and add it as a child to the svg id.

When I look at the DOM, I can see the elements being added, and their properties are such:

<svg id="gdc_container" xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="300">
    <rect id="gdc_background" width="500" height="300" style="rgb(0,0,255)"></rect>
</svg>

Everything looks fine, however the graphics are not showing up. When I use Chromes inspector, I can see the svg and rect elements, but the chrome tooltip shows their size as [ 0 x 0 ].

Anyone have any ideas?

Answer 1

Did you try using createElementNS? (developer.mozilla.org/en/DOM/document.createElementNS)

For some examples look at http://www.kevlindev.com/tutorials/basics/shapes/js_dom/index.htm.