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>

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

enter image description here

和Firefox（v 34.0.5）给出错误：

预期选择器。由于选择器错误而忽略了Rulset。

但是，如果您使用此代码创建单独的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/）。随意使用它并发表评论。

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一起使用，但它们确实告诉您将它与xhtml一起使用，xml和SVG一次只能使用xml语言。如果您打算使用独立的svg文件（将作为image / svg + xml提供），那么您可能需要重新放入<![CDATA[。

如何使用javascript嵌入SVG样式？

1 个答案: