如何创建一个SVG元素的样式表？(How do I create a style sheet for

我试图将一个样式表添加到SVG元素，就像这样：

var theSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var theStyle = document.createElementNS("http://www.w3.org/2000/svg", "style");
theSvg.appendChild(theStyle);
console.log("theStyle.sheet=", theStyle.sheet); // undefined, try adding svg to DOM
document.body.appendChild(theSvg);
console.log("theStyle.sheet=", theStyle.sheet); // still undefined

那我该怎么做才能在表节点有theStyle ？

有一个小提琴在这里： http://jsfiddle.net/XaV7D/2/

Answer 1:

作为@RobertLongson在评论中指出，问题是， SVG规范定义了svg:style元素的界面，但它没有实现同一个样式表的所有者元素相关联的CSS OM接口。

这里有几个变通办法（在等待SVG 2级的规格来实现最新的CSS OM规格）：

使用的（X）HTML风格元素。如果SVG代码是内联的（X）HTML文件内，则HTML <style>元素可用于样式化SVG。只要确保你无论是在默认命名空间中创建样式元素或明确在XHTML命名空间创建它，让你得到的一个实例HTMLStyleElement ，不SVGStyleElement 。
新创建的HTMLStyleElement添加到您的文档的头部和CSS样式表对象将您创建：
```
 var hs = document.createElement("style"); hs.type = "text/css"; document.head.insertBefore(hs, null); hs.sheet.insertRule("circle{fill:red;}", 0); 
```
这个答案将进入更详细的关于HTML动态地创建样式表，包括工作的例子。
（理论上）使用xml-stylesheet处理指令。如果你的SVG代码是在一个独立的SVG文件，那么你可以使用XML处理指令来链接外部样式表。处理指令节点提供了访问对象的样式表。
然而，不同于<style>元素，它可以是空的，则处理指令节点必须链接到一个文件中，或者浏览器将不会初始化样式表对象。我试图通过定义外部文件的正确的MIME类型的空数据URI要解决这个问题。 它通常，但不能始终如一，从控制台运行的时候，而不是从一个嵌入的脚本在FF /铬。 在铬中， sheet属性总是空，以同样的方式对待铬跨域样式表; 火狐给出了一个明确的安全错误。我认为它不会在IE浏览器，它不喜欢的非图像数据URI文件在所有的工作。
```
 var xs = document.createProcessingInstruction( "xml-stylesheet", "href='data:text/css,' type='text/css'"); document.insertBefore(xs, document.rootElement); xs.sheet.insertRule("circle{fill:blue;}", 0); 
```
你并不清楚为什么你试图动态创建一个样式表。如果意图是实际链接到同一个域服务器上的一个有效的样式表，那么安全问题就不会是一个问题; 的问题是，数据的URI作为跨来源处理。
使用svg:style元素，但随后访问使用样式表对象document.styleSheets （从评论到对方的回答，看来这是你已经在做什么）。循环使用所有的样式表，直到你发现有你的风格元素作为所有者节点之一：
```
 var ss = document.createElementNS("http://www.w3.org/2000/svg", "style"); svgElement.appendChild(ss); var sheets = document.styleSheets, sheet; for(var i=0, length=sheets.length; i<length; i++){ sheet=sheets.item(i); if (sheet.ownerNode == ss) break; } sheet.insertRule("circle{fill:green;}", 0); 
```
无论您的SVG是否是在一个独立的文件，这应该工作。

Answer 2:

您可以使用style节点内部svg元素。

从MDN例如：

<svg width="100%" height="100%" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg">
  <style>
    /* <![CDATA[ */
    circle {
      fill: orange;
      stroke: black;
      stroke-width: 10px;
    }
    /* ]]> */
  </style>

  <circle cx="50" cy="50" r="40" />
</svg>

你可以只是追加他们就像你在HTML做。

var style = document.createElement('style');
style.setAttribute("type", "text/css");
var svg = document.getElementsByTagName("svg")[0];
svg.appendChild(style);