Создание встроенного SVG с JS в HTML5

Я работаю с локальным файлом 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) на все нижний регистр и все еще работает отлично, поэтому я не думаю, что проблема.

Является ли возможность SVG для HTML5 ограничена статическим HTML, и мне нужно делать пространства имён для добавления содержимого SVG через JS, или есть что-то еще, что мне не хватает?

Ответы

Ответ 1

Оказывается, это проблема с пространством имен: элементы должны быть созданы с помощью createElementNS ( "http://www.w3.org/2000/svg",...), в котором у Prototype нет встроенного ( новый элемент (...)). Поэтому я предполагаю, что ситуация с SVG в HTML5 в основном "SVG без пространства имен получает пространство имен, добавленное во время разбора (но после этого это как раньше, как XHTML)".

P.S., кнопка "Ответ на ваш вопрос" здесь не работает для меня сегодня, поэтому, если кто-нибудь добавит это как ответ, я буду отмечать ее правильно.: -)