如何使用 javascript 嵌入 SVG 样式？

Question

我正在尝试使用 JavaScript 将 CSS 样式嵌入到 SVG 内容（如 in this example）中。 SVG 本身嵌入到 HTML5 文件中。样式嵌入的目的是将 SVG 在线创建的内容保存到一个独立的 *.svg 文件中。

这里是第一次测试的内容：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>

在该示例中，样式不起作用：

而 Firefox (v 34.0.5) 给出错误：

Selector expected. Rulset ignore due to bad selector.

但是，如果您使用此代码创建一个单独的 html 文件，将其保存并在浏览器中重新打开，则可以看到样式，即它被浏览器正确解析。

如果更改样式代码为：

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

然后样式在线工作，没有错误 (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/)。欢迎使用和评论。

Answer 1

您有两个主要错误。首先，您需要在 SVG 命名空间中创建样式元素，即

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

其次你不能在 html 中使用 <![CDATA[ 它是 xhtml 唯一的东西所以你想要

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

最后（此位是可选的），如果您愿意，可以省略 text/css 属性。所有这些 gives you this

规范当然不会告诉您将<![CDATA[与html一起使用，但他们确实告诉您将其与x[=28=一起使用] 和 xml 并且 SVG 曾经是一种仅 xml 的语言。如果您打算拥有独立的 svg 文件（将作为 image/svg+xml），那么您可能需要将 <![CDATA[ 放回原处。

如何使用 javascript 嵌入 SVG 样式？

How to embed SVG styling with javascript?

javascript

html

css

svg