我的代码向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);
}
编辑1:
有趣的是,最初的折线似乎有0pxw和0pxh
修改后,它的大小为:
最佳答案
对于非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/