如何用javascript嵌入SVG样式？

我正在尝试将CSS样式嵌入到SVG内容中，就像使用JavaScript一样。SVG本身嵌入到HTML5文件中。样式嵌入的目的是将SVG在线创建的内容保存到独立的*.SVG文件中

以下是第一个测试内容：

然后样式可以在线工作，没有错误。但这不是规格要求我们做的。我可以将SVG部分保存到中的一个文件中，然后在浏览器中打开它，它的样式看起来是正确的，但我不确定它在其他应用程序中的行为

所以，问题就在主题中

另外，还有一个问题我还没有找到任何解决办法。如果尝试将样式数据与样式标记合并，如下所示：

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

我知道它发生在html元素的内部内容中，但为什么在上面的第一种情况下不发生呢

---

另外，由于社区友好地提供了关于这个问题的答案，指向了正确的方向，但没有给出一个有效的例子，所以我把一个例子放到了JSFIDLE上。请随意使用和评论。

您有两个主要错误。首先，您需要在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，那么您可能需要将其放回。

您有两个主要错误。首先，您需要在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，那么您可能需要将其放回。

谢谢，@Robert。对于第一个“bug”，我看不到代码产生的内容有任何区别。CDATA不能包含在嵌入HTML的SVG中，但如果有嵌入样式，则必须包含在SVG文件中。对吗？然后，在将SVG内容保存到文件中时，需要动态添加CDATA？如果检查内容的名称空间，则需要添加CDATA。实际上，除了SVG名称空间中的样式元素本身之外，第一个“bug”不会有太大的区别，这些样式仍将应用相同的样式。如果您正在使用蜡染或尝试通过xlink:href引用外部脚本内容，则会应用相同的样式。否则你是对的，html脚本元素的工作原理与SVG元素基本相同。谢谢，@Robert。对于第一个“bug”，我看不到代码产生的内容有任何区别。CDATA不能包含在嵌入HTML的SVG中，但如果有嵌入样式，则必须包含在SVG文件中。对吗？然后，在将SVG内容保存到文件中时，需要动态添加CDATA？如果检查内容的名称空间，则需要添加CDATA。实际上，除了SVG名称空间中的样式元素本身之外，第一个“bug”不会有太大的区别，这些样式仍将应用相同的样式。如果您正在使用蜡染或尝试通过xlink:href引用外部脚本内容，则会应用相同的样式。否则，您是对的，html脚本元素的工作原理与SVG元素基本相同。为什么在上述第一种情况下不会发生这种情况？为什么第一种情况下不会发生什么？@JLRish，好问题。在第一种情况下：document.createTextNode“the”之所以发生这种情况，是因为在HTML而不是XHTML中，文本内容不会在元素内部转义。它被编码在任何其他类型的元素中。因此，当您将带有s的文本添加到defs时，文本被转义，但添加到style元素的文本没有转义。观察：根据@JLRishe和Robert Longson的回答，我创建了一个示例，其中SVG可以保存为外部库使用的文件。为什么在上述第一种情况下不会发生这种情况？为什么第一种情况下不会发生什么？@JLRish，好问题。在第一种情况下：document.createTextNode“the”之所以发生这种情况，是因为在HTML而不是XHTML中，文本内容不会在元素内部转义。它被编码在任何其他类型的元素中。因此，当您将带有s的文本添加到defs时，文本被转义，但添加到style元素的文本没有转义。观察：根据@JLRishe和Robert Longson的回答，我创建了一个示例，其中SVG可以保存为外部库使用的文件。

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