javascript - 如何将外部 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-graph/

如果您引用有关如何从 javascript 合成样式表的教程，则可加分。但我的主要用例是来自 URL 的样式表。

Answer 1

一些方法:

• 插入一个 style 元素，该元素具有引用外部样式表的 @import 语句
• 插入一个引用外部样式表的link元素(注意:必须在XHTML命名空间中创建，所以使用createElementNS)
• 创建一个 xml-stylesheet processing instruction引用外部样式表
• 插入一个 style 元素，文本内容是您为获取外部样式表而创建的 XMLHttpRequest 的文本内容

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