我的代码向SVG添加了折线,但这些折线未呈现。

但是,如果我打开检查器(在Chrome上为F12),请在源代码中找到它们,右键单击它们,将其编辑为HTML,添加空格并按Enter,它们就会被渲染!

我在这里想念什么?

function drawLine(x1, y1, x2, y2) {
    var line = document.createElement("polyline");
    line.style.cssText = "fill:none;stroke:black;stroke-width:2";

    var linePoints = `${x1},${y1} ${x2},${y2}`;
    line.setAttribute('points', linePoints);

    window.linesContainer.appendChild(line);
}


javascript - 仅在检查器上修改HTML之后才渲染SVG折线-LMLPHP

编辑1:

有趣的是,最初的折线似乎有0pxw和0pxh

javascript - 仅在检查器上修改HTML之后才渲染SVG折线-LMLPHP

修改后,它的大小为:

javascript - 仅在检查器上修改HTML之后才渲染SVG折线-LMLPHP

最佳答案

对于非HTML元素(在本例中为SVG),您应该使用createElementNS,尽管您不应在SVG名称空间中使用setAttributeNS

因此,新代码为:



var svg_NS = 'http://www.w3.org/2000/svg';
var svg = document.getElementById('svg');
function drawLine(x1, y1, x2, y2) {
    var line = document.createElementNS(svg_NS, "polyline");
    line.style.cssText = "fill:none;stroke:black;stroke-width:2";

    var linePoints = `${x1},${y1} ${x2},${y2}`;
    line.setAttribute('points', linePoints);

    window.linesContainer.appendChild(line);
}

drawLine(0,0,200,200)

<svg id="linesContainer"></svg>





看更多:

https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course
https://stackoverflow.com/a/6701928/6184972

关于javascript - 仅在检查器上修改HTML之后才渲染SVG折线,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/60100760/

10-12 12:55
查看更多