时间戳

首页 > 解决方案 > HTML/CSS 设置和 Javascript 设置的区别 - 主要是 Svg>Line 元素

javascript - HTML/CSS 设置和 Javascript 设置的区别 - 主要是 Svg>Line 元素

问题描述

我有一个小问题，我似乎无法解决。我创建了一个表格，每个单元格中都有一个 svg>line 元素。不同之处在于，1 行是手动添加的，另一行是通过 Javascript 循环添加的。问题是 Javascript 中的那些没有显示，即使它们是相同的。

手动添加：

<table id="centertable" class="table">
    <tr class="celldates" id="topDate"></tr>
    <tr>
        <td>
            <svg>
                <line x1="0" y1="50%" x2="100%" y2="50%"/>
            </svg>
        </td>
        <td>
            <svg>
                <line x1="20%" y1="50%" x2="60%" y2="50%"/>
            </svg>
        </td>
    </tr>
</table>

通过 Javascript 添加：

function setPersonTimes(person, weeks){
    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.createElement("svg");
            var f = document.createElement("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);
    }

}

现在所提到的问题是，使用 Javascript 添加的行是不可见的，即使添加了它们也是如此。它们明显显示如下：

例子

绿色的是手动添加并使用 CSS 代码：

   svg{
        height: 10px;
        width: 100%;
        padding: 0px;
        vertical-align: middle;
        stroke-width: 5px;
        border-radius: 5px;
        stroke: green;
        box-shadow: 0px 0px 2px rgb(0, 0, 0);
        float:left;
    }

任何想法为什么它在手动添加它时显示，而不是通过 Javascript？

标签： javascripthtmlcss

解决方案

我看到您正在使用document.createElement("svg")，但是 HTML 解析器没有提示此元素的名称空间。因此它将被分配给默认xhtml命名空间"http://www.w3.org/1999/xhtml"

你需要使用

document.createElementNS("http://www.w3.org/2000/svg", "svg")

查看文档

推荐阅读