javascript - 如何使用 JavaScript 将 CSS 样式插入到 SVG 中？

Question

我尝试将 CSS 样式表添加到 SVG。所以我有以下 svg:

<svg>
  <defs id="mydefs">
  </defs>
  <rect class="myclass" x="10" y="10" width="20" height="20"/>
</svg>

我想给它添加一个样式表:

<svg>
  <defs id="mydefs">
    <style type="text/css">
      .myclass {
        fill: red;
      }
    </style>
  </defs>
  <rect class="myclass" x="10" y="10" width="20" height="20"/>
</svg>

我试过了

var defs = document.getElementById('mydefs');
var style = document.createElementNS("http://www.w3.org/2000/svg", 'style');
style.type = 'text/css';
style.insertRule('.myclass { fill: red; }', style.cssRules.length);
defs.appendChild(style);

但是 insertRule(和 cssRules)似乎不受支持。这是(不工作的)codepen:

https://codepen.io/anon/pen/EEoLqg

Answer 1

像这样工作:

var defs = document.getElementById('mydefs');
var style = document.createElementNS("http://www.w3.org/2000/svg", 'style');
defs.appendChild(style);
style.type = 'text/css';
style.sheet.insertRule('.myclass { fill: red; }', style.sheet.cssRules.length);

(顺便说一句，您也可以只使用父文档的样式表:)

var style = document.createElement('style');
document.head.appendChild(style);
style.type = 'text/css';
style.sheet.insertRule('.myclass { fill: red; }');

上述方法不会在检查器中显示任何 CSS。如果您需要，您可以尝试以下操作:

var defs = document.getElementById('mydefs');
var style = document.createElementNS("http://www.w3.org/2000/svg", 'style');
defs.appendChild(style);
style.innerHTML = '.myclass { fill: red; }';

---

更新:根据 Daniel 的评论，IE 解决方法:

(问题似乎是 IE 不支持 SVG 元素的 .innerHTML。)

使用 .innerHTML的 <div>并将其设置为 <svg><style>.myclass { fill: red }</style></svg>然后将所有节点附加到 div 中的 .childNodes[0].childNodes[0]到 style元素通过:

Array.prototype.slice.call(div.childNodes[0].childNodes[0].childNodes).forEach(function(el) {
    element.appendChild(el);
});

哪里div是<div>元素。