Javascript 使用JS创建的SVG路径不显示

我想使用Javascript在SVG中创建/绘制路径（线）。但由于某些原因，即使生成了html，这些行也不会显示。有什么我遗漏了，你能看看我的代码，告诉我为什么它没有显示出来吗

这是MZJS代码

     //add lines from layerborderbot to ldescborderbot
     var _Ldesc = document.createElement('svg');
     _Ldesc.style.cssText = `position:absolute;left:calc(26vw + 3px);top:calc(66mm + 2px);width:calc(2.1vw + 1px);height:${scaleLength(Math.ceil(layerTotalLengthN)*100)}cm;`;
     for (x = 0; layer_anzahl > x; x++) {
         var _lineLdesc = document.createElementNS("http://www.w3.org/2000/svg", 'path'); //Create a path in SVG's namespace
     var tempPos; var tempHeight; var tY; var tH;
     if(typeof positionLith[x+1] === 'undefined' && dHdesc[x] < 0) {tY = cm2px(parseFloat(scaleLength(layerTotalLengthN*100))); tH = cm2px(dHdesc[x]);}
     else  { tY = cm2px(scaleLength(parseFloat(lith_to[x+1])*100));}
     if(dHdesc[x] > 0) { tY = cm2px(scaleLength(parseFloat(lith_to[x])*100)); tH = cm2px(getlayersize(x));}
     else {  if (x==0 && dHdesc[0]<0) { tH = cm2px(realHeightLdesc[x] - getlayersize(x));}
             else if (x==0 && dHdesc[0]>0) { tH = cm2px(getlayersize(x));}
             else {
                 if(occupyDesc[x] > 0) { tH = cm2px(occupyDesc[x]-getlayersize(x));}
                 else { tH = cm2px(realHeightLdesc[x]-getlayersize(x));} 
             }
         }


         _lineLdesc.setAttribute("d",`M 0 ${tY} L ${vw2px(2.1)} ${tH}`); //Set path's data
     _lineLdesc.style.stroke = "#000"; //Set stroke colour
     _lineLdesc.style.strokeWidth = "1"; //Set stroke width
     _Ldesc.appendChild(_lineLdesc);

//将行从LayerOrderBot添加到ldescborderbot
var _Ldesc=document.createElement（'svg'）；
_Ldesc.style.cssText=`位置：绝对；左：计算（26vw+3px）；顶部：calc（66mm+2px）；宽度：计算值（2.1vw+1px）；高度：${scaleLength（Math.ceil（layerTotalLengthN）*100）}厘米；`；
对于（x=0；层>x；x++）{
var _lineLdesc=document.createElements（“http://www.w3.org/2000/svg“，'path'）；//在SVG的命名空间中创建路径
var tempPos；var tempHeight；var tY；var tH；
if（位置类型[x+1]=='undefined'&&dHdesc[x]<0）{tY=cm2px（parseFloat（scaleLength（layerTotalLengthN*100））；tH=cm2px（dHdesc[x]）；}
else{tY=cm2px（scaleLength（parseFloat（lith_到[x+1]）*100））；}
如果（dHdesc[x]>0）{tY=cm2px（scaleLength（parseFloat（lith_to[x]）*100））；tH=cm2px（getlayersize（x））；}
else{if（x==0&&dHdesc[0]0）{tH=cm2px（getlayersize（x））；}
否则{
如果（occupyDesc[x]>0）{tH=cm2px（occupyDesc[x]-getlayersize（x））；}
else{tH=cm2px（realHeightLdesc[x]-getlayersize（x））；}
}
}
_lineLdesc.setAttribute（“d”`m0${tY}L${vw2px（2.1）}${tH}`）；//设置路径的数据
_lineLdesc.style.stroke=“#000”//设置笔划颜色
_lineLdesc.style.strokeWidth=“1”//设置笔划宽度
_Ldesc.appendChild（_lineLdesc）；

这是HTML输出（从chrome控制台）

---

您没有指定viewBox，因此它默认为300x150

但是，您绘制的3条线需要一个

viewBox=“0 0 34 435”

来显示这些线中的所有线：

svg{
高度：180像素；
背景：粉红色；
}

我认为如果要在代码中创建SVG，需要使用

createElements

指定名称空间。例如，

document.createElements（“http://www.w3.org/2000/svg“，“svg”）；

     <svg style="position: absolute; left: calc(26vw + 3px); top: calc(251.449px); width: calc(2.1vw + 1px); height: 12cm;">
     <path d="M 0 151.18110426684856 L 33 151.18110426684856" style="stroke: rgb(0, 0, 0); stroke-width: 1;"></path>
     <path d="M 0 434.64567476718963 L 33 15.807083450280626" style="stroke: rgb(0, 0, 0); stroke-width: 1;"></path>
     <path d="M 0 434.64567476718963 L 33 226.77165640027278" style="stroke: rgb(0, 0, 0); stroke-width: 1;"></path>
     </svg>