javascript - 如何为 SVG 元素创建样式表？

Question

我尝试将样式表添加到 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 中的工作表节点？

这里有一个 fiddle :http://jsfiddle.net/XaV7D/2/

Answer 1

正如@RobertLongson 在评论中指出的那样，问题在于 SVG specs define a svg:style element interface , 但它没有实现 the CSS OM interfaces associated with a stylesheet's owner element .

这里有一些解决方法(在等待 SVG 2 规范实现最新的 CSS OM 规范时):

1. 使用 (X)HTML 样式元素。如果您的 SVG 代码内嵌在 (X)HTML 文档中，则 HTML <style>元素可用于设置 SVG 的样式。只需确保在默认 namespace 中创建样式元素或在 XHTML namespace 中显式创建它，以便获得 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); 
   

   This answer goes into more detail about dynamically creating stylesheets in HTML, including a working example.

2. (理论上) 使用 xml-stylesheet processing instruction .如果您的 SVG 代码位于独立的 SVG 文件中，那么您可以使用 XML 处理指令来链接外部样式表。处理指令节点提供对样式表对象的访问。

   但是，与 <style> 不同的是元素，可以为空，处理指令节点必须链接到文件，否则浏览器永远不会初始化样式表对象。我试图通过将外部文件定义为正确 MIME 类型的空数据 URI 来解决这个问题。 它通常(但并非始终如一)在从控制台运行时在 FF/Chrome 中运行，而不是从嵌入式脚本运行。在 Chrome 中，sheet属性始终为 null，与 Chrome 处理跨域样式表的方式相同； Firefox 给出了明确的安全错误。我认为它在 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 被视为跨源。

3. 使用 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 是否在独立文件中，这都应该有效。