html5 js创建svg,javascript - Creating inline SVG with JS in HTML5 - Stack Overflow

I'm working with a local HTML5 file -- it's got at the top. I put something like this in it:

(no namespaces, thanks HTML5!), and it displays great in Chrome and FF4 beta.

Now I want to create the same thing but via JS. I'm using Prototype, so I wrote something like:

var box = new Element('svg', {'width':'3em', 'height':'2em', 'preserveAspectRatio': 'none', 'viewBox': '0 0 100 100'});

box.appendChild(new Element('rect', {fill:'red', x:'0', y:'0', width:'100', height:'100' }));

container.appendChild(box);

I can see in Firebug / DOM inspector (both FF and Chrome) that it's creating the same DOM structure for this.

The only difference I see is that the attributes ("preserveAspectRatio" and "viewBox") are all-lowercase, but I tried changing the attributes in my first test (static HTML) to all-lower-case and it still works fine, so I don't think that's the problem.

Is the HTML5 SVG capability limited to static HTML, and I need to do namespaces still for adding SVG content via JS, or is there something else I'm missing?