如何将外部CSS文件分配给javascript构造的SVG对象？

Question

我使用javascript构建SVG图形，然后将其插入到网页中。我想给这个动态创建的SVG分配一个样式表（来自外部.css文件），但我看到的带有样式表的SVG的示例在SVG元素之外有样式引用。

下面是构造SVG对象的javascript：

LVMGrapher.prototype.getCanvas = function()
{
    if (this.canvas==null) {
    var wrap = document.getElementById("svgWrap");
    this.canvas = document.createElementNS(SVG_NS, "svg");
    removeAllChildren(wrap);
    wrap.appendChild(this.canvas);
    }
    return this.canvas;
}

以及以后

var svg = this.getCanvas();
var svgNS = svg.namespaceURI;

svg.setAttribute("preserveAspectRatio", "xMinYMin meet");
svg.setAttribute("viewBox", "0 0 1000 400");
svg.setAttribute("width", "100%");

后来我用图形填充SVG，现在我硬编码颜色，但我宁愿给它们类，让样式表控制颜色方案。没有什么好的理由让人必须深入我的javascript才能控制颜色。

实验应用程序位于http://www.purplefrog.com/~thoth/exp/lvm图/

如果你参考了如何从javascript合成样式表的教程，那就更好了。但是我的主要用例是来自URL的样式表。

Answer 1

使用Erik Dahlström的简短回答，我通过以下代码取得了成功：

function addStyle(svg)
{
    var style = document.createElement("style");
    style.appendChild(document.createTextNode("@import url('bacon2.css')"));
    svg.appendChild(style);
}

但是，我认为我会选择斯蒂芬·托马斯引导我的解决方案。封闭文档的样式适用于由 java 脚本制造和插入的 SVG 元素。

当我提出最初的问题时，我被

合成

Answer 2

这样做的一些方法：

• 插入一个style元素，该元素具有引用外部样式表
的 @import语句
• 插入一个引用外部样式表
的 link元素（注意：必须在XHTML命名空间中创建，因此使用 createElementNS）
• 创建一个引用外部样式表的xml-stylesheet处理指令
• 插入一个style元素，文本内容是您为获取外部样式表
而创建的XMLHttpRequest的文本内容

我会推荐前两个选项中的任何一个。