HTML/CSS与JavaScript生成SVG Line元素的显示差异问题排查

哦，这个坑我之前踩过！你遇到的问题核心在于SVG元素属于XML命名空间，用普通的document.createElement()创建SVG及其子元素是行不通的——浏览器会把它们当成普通的HTML元素处理，而不是SVG元素，自然就无法正常渲染了。

为什么手动添加的能正常显示？ #

你手动写的HTML里，浏览器会自动识别<svg>标签属于SVG命名空间，会按照SVG的规则解析里面的<line>元素，所以样式和渲染都正常。但JS里直接用createElement()创建的话，没有指定命名空间，元素就不是真正的SVG元素，哪怕属性写得一样也没用。

怎么修复？ #

创建SVG相关元素时，必须使用document.createElementNS()方法，指定SVG的官方命名空间：http://www.w3.org/2000/svg。

修改你的JavaScript代码中创建<svg>和<line>的部分：

// 原来的错误创建方式
// var e = document.createElement("svg");
// var f = document.createElement("line");

// 修改后的正确方式
const svgNS = "http://www.w3.org/2000/svg";
var e = document.createElementNS(svgNS, "svg");
var f = document.createElementNS(svgNS, "line");

把这段修改代入你的setPersonTimes函数，完整的修改后代码如下：

function setPersonTimes(person, weeks){
  const svgNS = "http://www.w3.org/2000/svg"; // 定义SVG命名空间
  for(let i = 0; i < person; i++){
    var a = document.createElement("tr");
    var b = document.createElement("td");
    b.classList.add("tableLeftContent");
    b.innerHTML = "Person"
    a.appendChild(b);
    document.getElementById("lefttable").appendChild(a);
    
    var c = document.createElement("tr");
    c.classList.add("celldata");
    for(let i2 = 0; i2 < weeks*7; i2++){
      var d = document.createElement("td");
      var e = document.createElementNS(svgNS, "svg"); // 用命名空间创建svg
      var f = document.createElementNS(svgNS, "line"); // 用命名空间创建line
      f.setAttribute("x1", "0%")
      f.setAttribute("y1", "50%")
      f.setAttribute("x2", "80%")
      f.setAttribute("y2","50%")
      d.appendChild(e);
      e.appendChild(f);
      c.appendChild(d);
    }
    document.getElementById("centertable").appendChild(c);
  }
}

这样修改后，JS生成的SVG Line元素就会和手动添加的一样，正确应用CSS样式并显示出来了。

内容的提问来源于stack exchange，提问作者user11119570