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

Я пытаюсь встроить CSS-стиль в содержимое SVG (например, in this example) с помощью JavaScript. Сам SVG встроен в файл HTML5. Цель внедрения стиля - сохранить созданный в SVG контент в автономном * .svg-файле.Как встраивать SVG-стиль в javascript?

Здесь впервые опробован содержание: http://jsfiddle.net/3L8a2oxy/

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>SVG embedded styling</title> 
</head> 

<body> 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
     <defs></defs> 
     <circle cx="50" cy="50" r="25"/> 
    </svg> 

    <script> 
     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('<![CDATA[circle { fill: red; }]]>'); 
     style.appendChild(node); 

    </script> 
</body> 

</html>

В этом примере стиль не работает:

enter image description here

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

Selector expected. Rulset ignore due to bad selector.

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

Если один изменяет код стиля, чтобы:

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

enter image description here

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

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

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

var node = document.createTextNode('<style type=\'text/css\'><![CDATA[circle { fill: red; }]]></style>'); 
defs.appendChild(node);

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

&lt;style type='text/css'&gt;&lt;![CDATA[circle { fill: red; }]]&gt;&lt;/style&gt;

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

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

источник

2015-01-13 Dmitry

_ «Почему этого не происходит в первом случае?» _ Почему не происходит то, что происходит в первом случае? – JLRishe

@JLRish, хороший вопрос. В первом случае: 'document.createTextNode (' Dmitry

Это происходит потому, что в HTML (в отличие от XHTML) текстовый контент не экранируется внутри'