如何为 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 中的工作表节点？

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

Answer 1

正如@RobertLongson 在 cmets 中指出的那样，问题在于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 样式。只需确保在默认命名空间中创建样式元素或在 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); 
   

   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 属性始终为空，与 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 访问样式表对象（从 cmets 到另一个答案，看来这就是您已经在做的事情）。循环浏览所有样式表，直到找到将您的样式元素作为所有者节点的样式表：

   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

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

来自 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);

Answer 3

IE11 的 SVGStyleElements 中缺少“sheet”属性
根据 AmeliaBR 的回答，我做了一个 polyfill：

if (!('sheet' in SVGStyleElement.prototype)) {
    Object.defineProperty(SVGStyleElement.prototype, 'sheet', {
        get:function(){
            var all = document.styleSheets;
            for (var i=0, sheet; sheet=all[i++];) {
                if (sheet.ownerNode === this) return sheet;
            }

        }
    });
}