Question

我正在使用javascript构建一个SVG图形，然后我将其插入到网页中。我想将样式表（从外部.css文件）分配给这个动态创建的SVG，但我看到的带有样式表的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才能控制颜色。

exerimental app位于http://www.purplefrog.com/~thoth/exp/lvm-graph/

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

Answer 1

执行此操作的一些方法：

插入style元素，该元素具有引用外部样式表的@import语句
插入引用外部样式表的link元素（注意：必须在XHTML名称空间中创建，因此使用createElementNS）
创建引用外部样式表的xml-stylesheet processing instruction
插入style元素，文本内容是您获取外部样式表所使用的XMLHttpRequest的文本内容

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

Answer 2

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

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

但是，我想我会选择斯蒂芬托马斯带领我的解决方案。封闭文档的样式适用于由javascript制作和插入的SVG元素。

当我提出原始问题时，我被＆lt; object＆gt;所包含的SVG文档的性质误导了。标签（不像在线SVG）不继承引用HTML文档的样式表。

合成的＆lt; style＆gt;对于想要扩充封闭HTML文档样式的程序员来说，tag仍然有用。

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

2 个答案: