Я работаю с локальным файлом HTML5 - он имеет <!DOCTYPE html> вверху. Я положил что-то вроде этого:
<svg height="2em" width="3em" preserveAspectRatio="none" viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" fill="red"/>
</svg>
(без пространств имен, спасибо HTML5!), И он отлично отображается в бета-версии Chrome и FF4.
Теперь я хочу создать то же самое, но через JS. Я использую Prototype, поэтому я написал что-то вроде:
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);
В Firebug / DOM инспектор (как FF, так и Chrome) я вижу, что он создает для этого одну и ту же структуру DOM.
Единственное отличие, которое я вижу, состоит в том, что атрибуты ("preserveAspectRatio" и "viewBox") являются строчными, но я попытался изменить атрибуты в моем первом тесте (статический HTML) на строчные, и он все еще работает хорошо, так что я не думаю, что это проблема.
Ограничена ли возможность HTML5 SVG статическим HTML, и мне все еще нужно создавать пространства имен для добавления контента SVG через JS, или я что-то упускаю?