SVG的Javascript生成

我在我的浏览器（Firefox）中绘制了一条复杂的路径作为背景，使用Javascript生成的SVG元素和属性，并希望叠加由多个SVG形状组成的图标。在下面的示例中，未绘制形状。有人能发现我的错误吗

function mygui() {
    var xmlns = "http://www.w3.org/2000/svg";
    var boxWidth = 2188;
    var boxHeight = 1312;

    var svgElem = document.createElementNS (xmlns, "svg");
    svgElem.setAttributeNS (null, "viewBox", "0 0 " + boxWidth + " " + boxHeight);
    svgElem.setAttributeNS (null, "width", boxWidth);
    svgElem.setAttributeNS (null, "height", boxHeight);
    svgElem.setAttributeNS (null, "preserveAspectRatio", "xMidYMid meet");

    var g = document.createElementNS (xmlns, "g");
    svgElem.appendChild (g);
    g.setAttributeNS (null, "transform", "translate(0.000000,1312.000000) scale(0.100000,-0.100000)");

    var coords = ... //I have a very long list of coordinates here

    var path = document.createElementNS (xmlns, "path");
    path.setAttributeNS (null, "d", coords);
    path.setAttributeNS (null, "fill", "black");
    g.appendChild (path);

    //Everything above this point is displayed correctly

    var icon = document.createElementNS (xmlns, "g");
    icon.setAttributeNS (null, "id", "1");
    svgElem.appendChild (icon);

    var subicon = document.createElementNS (xmlns, "circle");
    subicon.setAttributeNS (null, "fill", "beige");
    subicon.setAttributeNS (null, "stroke", "orange");
    subicon.setAttributeNS (null, "stroke-width", "20");
    subicon.setAttributeNS (null, "cx", "13000");
    subicon.setAttributeNS (null, "cy", "8000");
    subicon.setAttributeNS (null, "r", "60");
    icon.appendChild (subicon);

    //I will have more sub-icons, but use only one here

    var svgContainer = document.getElementById ("svgContainer");
    svgContainer.appendChild (svgElem);

}

两件事：

1） 在将图标添加到svgElem之前，必须将子图标添加到图标

2） 圆心cx、cy的位置在图形的外侧

请参见下面的代码或小提琴，我在绘图区域内移动了圆圈，并移动了创建图标的顺序。正如您所说，我遗漏的代码的其余部分是功能性的

看

---

浏览器控制台中是否有任何错误？id值可能不是数字，但这不会导致渲染失败。这可能会使

元素不可引用。我将id更改为字母数字，并更正了一个控制台警告，指出HTML文档中未指定字符集。我仍然看不到这个圆圈。可能在图标上附加子图标，然后在svg上附加图标？这看起来确实更干净，与静态svg文档并行，但没有解决问题。

function mygui() {
var xmlns = "http://www.w3.org/2000/svg";
var boxWidth = 2188;
var boxHeight = 1312;

var svgElem = document.createElementNS (xmlns, "svg");
svgElem.setAttributeNS (null, "viewBox", "0 0 " + boxWidth + " " + boxHeight);
svgElem.setAttributeNS (null, "width", boxWidth);
svgElem.setAttributeNS (null, "height", boxHeight);
svgElem.setAttributeNS (null, "preserveAspectRatio", "xMidYMid meet");


//Everything above this point is displayed correctly

var icon = document.createElementNS (xmlns, "g");
icon.setAttributeNS (null, "id", "1");


var subicon = document.createElementNS (xmlns, "circle");
subicon.setAttributeNS (null, "fill", "beige");
subicon.setAttributeNS (null, "stroke", "orange");
subicon.setAttributeNS (null, "stroke-width", "20");
subicon.setAttributeNS (null, "cx", "100");
subicon.setAttributeNS (null, "cy", "100");
subicon.setAttributeNS (null, "r", "60");
icon.appendChild (subicon);
svgElem.appendChild (icon);

//I will have more sub-icons, but use only one here

var svgContainer = document.getElementById ("svgContainer");
svgContainer.appendChild (svgElem);
}