Javascript 在控制台中添加到DOM

我正在绘制一个树形图，其中SVG路径连接节点。这将被计算并添加到具有绝对起点和终点的DOM中。实际路径将添加到：

<svg id="svg1" width="0" height="0" ></svg>

用于呈现SVG点的代码（不同的JS文件）：

功能符号（x）{
回报率（x<0）？-1:1；
}
绝对函数（x）{
返回值（x<0）？-x:x；
}
函数drawPath（svg、path、startX、startY、endX、endY）{
//获取路径的笔划宽度（如果想要精确，可以使用笔划大小的一半）
var stroke=parseFloat（path.attr（“笔划宽度”）；
//检查svg是否足够大以绘制路径，如果不够大，请设置“高/宽”
if（svg.attr（“height”）结束发送）{
arc1=1；
arc2=0；
}
//画一条管道状的路径
//1.向下移动一点，2.拱起，3.向右移动一点，4.拱起，5.向下移动到末端
路径属性（“d”，“M”+startX+“”+startY+
“V”+（星形+三角形）+
“A”+delta+“”+delta+“0”+arc1+“”+（startX+delta*signum（deltaX））+“”+（startY+2*delta）+
“H”+（endX-delta*signum（deltaX））+
“A”+delta+“”+delta+“0 0”+arc2+“”+endX+“”+（星形+3*delta）+
“V”+endY）；
}
功能连接元素（svg、路径、startElem、endElem）{
var svgContainer=$（“#svgContainer”）；
//如果第一个元素低于第二个元素，则交换！
if（startElem.position（）.top>endElem.position（）.top）{
var temp=startElem；
startElem=endElem；
endElem=温度；
}
//获取svg容器的（上、左）角坐标
var svgTop=svgContainer.position（）.top；
var svgLeft=svgContainer.position（）.left；
//获取两个元素的（上、左）坐标
var startcord=startElem.position（）；
var endCoord=endElem.position（）；
//计算路径的起始（x，y）坐标
//我们希望x坐标可以直观地显示元素的中点
var startX=startcord.left+0.5*startElem.outerWidth（）-svgLeft；//x=left位置+0.5*width-svg的左位置
var startY=startcood.top+startElem.outerHeight（）-svgTop；//y=top-position+height-svg的top-position
//计算路径的端点（x，y）坐标
var endX=endCoord.left+0.5*endElem.outerWidth（）-svgLeft；
var endY=endCoord.top-svgTop；
//调用函数来绘制路径
绘图路径（svg、path、startX、startY、endX、endY）；
}

我找到了解决方案

因为浏览器读取SVG时需要对其进行渲染/计算。如果已在DOM中，并且您正在对其进行追加，则追加函数将不起作用

---

它不会显示，因为它已经被计算过。

可能您最初添加的东西的名称空间不正确。为什么不给我们看那个代码？@RobertLongson我更新了我的帖子，那不是真的。罗伯特告诉你你的问题：名称空间。jQuery不知道您想要创建一个SVG元素，因此它将创建一个名为

'path'

的HTMLUnkownElement，但它不会被识别为SVGPath元素，因为它不会被识别。要在DOM中附加SVG节点，需要使用

document.createElements（'http://www.w3.org/2000/svg“，”path“

。我明白了：）感谢您的反馈，我不知道添加SVG与HTML不同。不过还是有道理的！

<svg id="svg1" width="734.7778133786011" height="200">
<path id="Path0" d="M432.77778286102296 165.55556 V170.722226 A5.1666659999999975 5.1666659999999975 0 0 1 427.61111686102294 175.888892 H137.92709198846435 A5.1666659999999975 5.1666659999999975 0 0 0 132.76042598846436 181.05555800000002 V200" stroke-width="2px" style="stroke:#555; fill:none;  "></path>
<path id="Path1" d="M432.77778286102296 165.55556 V170.722226 A5.1666659999999975 5.1666659999999975 0 0 1 427.61111686102294 175.888892 H287.9270996178589 A5.1666659999999975 5.1666659999999975 0 0 0 282.7604336178589 181.05555800000002 V200" stroke-width="2px" style="stroke:#555; fill:none;  "></path>
<path id="Path2" d="M432.77778286102296 165.55556 V165.55556 A0 0 0 0 0 432.77778286102296 165.55556 H432.77778286102296 A0 0 0 0 1 432.77778286102296 165.55556 V200" stroke-width="2px" style="stroke:#555; fill:none;  "></path>
<path id="Path3" d="M432.77778286102296 165.55556 V170.722226 A5.1666659999999975 5.1666659999999975 0 0 0 437.944448861023 175.888892 H577.6111473786011 A5.1666659999999975 5.1666659999999975 0 0 1 582.7778133786011 181.05555800000002 V200" stroke-width="2px" style="stroke:#555; fill:none;  "></path>
<path id="Path4" d="M432.77778286102296 165.55556 V170.722226 A5.1666659999999975 5.1666659999999975 0 0 0 437.944448861023 175.888892 H727.6111473786011 A5.1666659999999975 5.1666659999999975 0 0 1 732.7778133786011 181.05555800000002 V200" stroke-width="2px" style="stroke:#555; fill:none;  "></path>
</svg>

$("#svg1").append('<path id="myNewPath' + x + '" d="M0 0" stroke-width="2px" stroke-width="0.3em" style="stroke:#555; fill:none;  "/>')

function connectAll(xCounterEachBox) {
for(i = 0; xCounterEachBox >= i; i++){
    connectElements($("#svg1"), $("#myNewPath" + i + ""), $("#parentBoxID"),  $("#box" + i + ""));
}

function signum(x) {
    return (x < 0) ? -1 : 1;
}
function absolute(x) {
    return (x < 0) ? -x : x;
}

function drawPath(svg, path, startX, startY, endX, endY) {
    // get the path's stroke width (if one wanted to be  really precize, one could use half the stroke size)
    var stroke =  parseFloat(path.attr("stroke-width"));
    // check if the svg is big enough to draw the path, if not, set heigh/width
    if (svg.attr("height") <  endY)                 svg.attr("height", endY);
    if (svg.attr("width" ) < (startX + stroke) )    svg.attr("width", (startX + stroke));
    if (svg.attr("width" ) < (endX   + stroke) )    svg.attr("width", (endX   + stroke));

    var deltaX = (endX - startX) * 0.15;
    var deltaY = (endY - startY) * 0.15;
    // for further calculations which ever is the shortest distance
    var delta  =  deltaY < absolute(deltaX) ? deltaY : absolute(deltaX);

    // set sweep-flag (counter/clock-wise)
    // if start element is closer to the left edge,
    // draw the first arc counter-clockwise, and the second one clock-wise
    var arc1 = 0; var arc2 = 1;
    if (startX > endX) {
        arc1 = 1;
        arc2 = 0;
    }
    // draw tha pipe-like path
    // 1. move a bit down, 2. arch,  3. move a bit to the right, 4.arch, 5. move down to the end 
    path.attr("d",  "M"  + startX + " " + startY +
                    " V" + (startY + delta) +
                    " A" + delta + " " +  delta + " 0 0 " + arc1 + " " + (startX + delta*signum(deltaX)) + " " + (startY + 2*delta) +
                    " H" + (endX - delta*signum(deltaX)) + 
                    " A" + delta + " " +  delta + " 0 0 " + arc2 + " " + endX + " " + (startY + 3*delta) +
                    " V" + endY );
}

function connectElements(svg, path, startElem, endElem) {
    var svgContainer= $("#svgContainer");

    // if first element is lower than the second, swap!
    if(startElem.position().top > endElem.position().top){
        var temp = startElem;
        startElem = endElem;
        endElem = temp;
    }

    // get (top, left) corner coordinates of the svg container   
    var svgTop  = svgContainer.position().top;
    var svgLeft = svgContainer.position().left;

    // get (top, left) coordinates for the two elements
    var startCoord = startElem.position();
    var endCoord   = endElem.position();

    // calculate path's start (x,y)  coords
    // we want the x coordinate to visually result in the element's mid point
    var startX = startCoord.left + 0.5*startElem.outerWidth() - svgLeft;    // x = left position + 0.5*width - svg's left position
    var startY = startCoord.top  + startElem.outerHeight() - svgTop;        // y = top position + height - svg's top position

        // calculate path's end (x,y) coords
    var endX = endCoord.left + 0.5*endElem.outerWidth() - svgLeft;
    var endY = endCoord.top  - svgTop;

    // call function for drawing the path
    drawPath(svg, path, startX, startY, endX, endY);

}