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; }';

更新：根据丹尼尔的评论进行IE解决：

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

使用.innerHTML的{{1}}并将其设置为<div>，然后将<svg><style>.myclass { fill: red }</style></svg>＆＃39; s div中的所有节点附加到.childNodes[0].childNodes[0]元素来自：

style

其中Array.prototype.slice.call(div.childNodes[0].childNodes[0].childNodes).forEach(function(el) { element.appendChild(el); });是div元素。

如何使用JavaScript将CSS样式插入SVG？

1 个答案: