Как вставить SVG-стиль с javascript?

Я пытаюсь внедрить CSS-стиль в SVG-контент (например, в этом примере ) с помощью JavaScript. Сам SVG встроен в файл HTML5. objective внедрения стиля – сохранить созданный в SVG контент в автономном * .svg-файле.

Вот первый проверенный контент: http://jsfiddle.net/3L8a2oxy/

    SVG embedded styling        var svg = document.getElementsByTagName("svg")[0]; var defs = svg.getElementsByTagName('defs')[0]; var style = document.createElement('style'); defs.appendChild(style); style.setAttribute('type', 'text/css'); var node = document.createTextNode(''); style.appendChild(node);    

В этом примере стилизация не работает:

введите описание изображения здесь

и Firefox (v 34.0.5) дает ошибку:

Селектор ожидается. Rulset игнорирует из-за плохого селектора.

Однако, если вы создадите отдельный html-файл с этим кодом, сохраните его и снова запустите в браузере, можно увидеть стиль, т. Е. Он правильно проанализирован браузером.

Если изменить код стиля, выполните следующие действия:

 var node = document.createTextNode('circle { fill: red; }'); 

введите описание изображения здесь

то стилизация работает онлайн без ошибок ( http://jsfiddle.net/8grf344g/ ). Но это не то, что нам сказали спецификации. Я могу сохранить часть SVG в файл, а затем открыть ее в браузере, и, похоже, она написана правильно, но я не уверен, как она будет вести себя в других приложениях.

Итак, вопрос в теме.

PS. Есть еще одна проблема, для которой я еще не нашел решения. Если вы попытаетесь объединить данные стиля с тегом стиля следующим образом:

 var node = document.createTextNode(''); defs.appendChild(node); 

затем перейти в документ, закодированный:

 <style type='text/css'><![CDATA[circle { fill: red; }]]></style> 

Я знаю, что это происходит для внутреннего содержимого элементов html, но почему этого не происходит в первом случае?

PS Поскольку ответы на вопрос, любезно предоставленные сообществом, указывают на правильное направление, но не дают рабочего примера, я помещал его в jsfiddle ( http://jsfiddle.net/26wfwa12/1/ ). Не стесняйтесь использовать его и комментировать.

У вас есть две основные ошибки. Во-первых, вам нужно создать элемент стиля в пространстве имен SVG, т.е.

 var style = document.createElementNS('http://www.w3.org/2000/svg', 'style'); 

Во-вторых, вы не можете использовать в html это только xhtml, поэтому вы хотите

 var node = document.createTextNode('circle { fill: red; }'); 

Наконец (и этот бит не является обязательным), атрибут text / css можно опустить, если хотите. Все это дает вам это

Спецификации, конечно , не говорят вам использовать с html, но они говорят вам использовать его с xhtml, а xml и SVG в один момент были только языком xml. Если вы собираетесь иметь автономные svg-файлы (которые будут отображаться как image / svg + xml), вам может потребоваться установить назад].