I'm working with a local HTML5 file -- it's got <!DOCTYPE html> at the top. I put something like this in it:
<svg height="2em" width="3em" preserveAspectRatio="none" viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" fill="red"/>
</svg>
(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?
I'm working with a local HTML5 file -- it's got <!DOCTYPE html> at the top. I put something like this in it:
<svg height="2em" width="3em" preserveAspectRatio="none" viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" fill="red"/>
</svg>
(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?
Share Improve this question asked Nov 7, 2010 at 5:24 KenKen 1,1691 gold badge9 silver badges14 bronze badges 7-
(Comment because this isn't helpful) If you're doing JavaScript vector manipulation, unless you specifically need SVG output, it may be easier to just use
<canvas>. – Delan Azabani Commented Nov 7, 2010 at 5:33 - The way the HTML5 spec bines SGML and XML (with respect to SVG) confuses the heck out of me too :( I think you should probably consult the spec directly to see if it has any ments regarding how this case should be handled. If it seems like it's being handled incorrectly, file a browser bug report. Also, if you're able to provide a link to the source file, I'd be curious to take a look. – jbeard4 Commented Nov 7, 2010 at 10:09
- Also, I doubt it's an issue involving namespaces, as "svg" and "rect" both live in the SVG namespace, and your question implies that they are both getting rendered, albeit incorrectly. @preserveAspectRatio, on the other hand, lives in the default namespace, and so you shouldn't prefix that with a namespace even if you wanted to. I think this is more likely to be an issue of case-sensitivity for tags and attributes. As a first step, I would try it without Prototype, just using node.setAttribute/setAttributeNS, and see if it works. It could be a Prototype problem. – jbeard4 Commented Nov 7, 2010 at 10:15
- echo-flow: OK, standalone example ing soon... :-) – Ken Commented Nov 7, 2010 at 17:11
-
1
echo-flow: Turns out it was a namespace issue: the elements need to be created with
createElementNS("http://www.w3/2000/svg", ...), which Prototype happens to have no built in (new Element(...)) support for. So I guess the HTML5 SVG situation is basically "SVG without a namespace gets the namespace added during parsing (but after that it's just like XHTML before)". – Ken Commented Nov 8, 2010 at 1:41
1 Answer
Reset to default 6Turns out it was a namespace issue: the elements need to be created with createElementNS("http://www.w3/2000/svg", ...), which Prototype happens to have no built in (new Element(...)) support for. So I guess the HTML5 SVG situation is basically "SVG without a namespace gets the namespace added during parsing (but after that it's just like XHTML before)".
P.S., the "Answer Your Question" button here isn't working for me today, so if anybody adds this as as answer, I'll mark it correct. :-)