使用JavaScript绘制SVG路径页面无显示问题求助

你的代码存在几个关键问题，导致浏览器无法正确渲染SVG路径，以下是具体问题和修复后的代码：

核心问题 #

1. SVG元素未使用命名空间创建：浏览器对SVG元素的识别依赖XML命名空间，直接用document.createElement()创建的SVG和path不会被当作SVG节点处理，这是路径不显示的主要原因。
2. SVG的style属性被覆盖：连续两次调用setAttribute("style")会导致第二次样式完全覆盖第一次，丢失了position: absolute，造成SVG定位出错。
3. div尺寸设置无效：给div设置width和height属性无法生效，div的尺寸需要通过CSS样式定义。
4. 路径缺少线宽设置：默认stroke-width可能过小，导致线条肉眼不可见。

修复后的代码 #

const page = document.getElementById('LAB');
var Erouter = document.createElement("div");
// 用CSS样式设置div尺寸，替代无效的HTML属性
Erouter.style.width = "50px";
Erouter.style.height = "50px";
Erouter.style.position = "relative";
Erouter.style.left = Routers[r].x + "px";
Erouter.style.top = Routers[r].y + "px";
page.appendChild(Erouter);

var elem = document.createElement("img");
elem.setAttribute("src", "./router.png");
elem.setAttribute("height", "50");
elem.setAttribute("width", "50");
elem.style.position = "absolute";
elem.setAttribute("alt", "Routers");
Erouter.appendChild(elem);

// 使用SVG专属命名空间创建svg元素
var svg = document.createElementNS('http://www.w3.org/2000/svg', "svg");
// 合并样式避免覆盖，同时简化写法
svg.style.cssText = "position: absolute; border: 5px solid orange;";
svg.setAttribute("height", "500px");
svg.setAttribute("width", "500px");

// 使用SVG命名空间创建path元素
var link = document.createElementNS('http://www.w3.org/2000/svg', 'path');
link.setAttribute('d','M0 0 L150 980');
link.setAttribute('stroke','green');
// 设置线宽确保线条可见
link.setAttribute('stroke-width', '2');
// 显式关闭填充，避免闭合路径被填充覆盖线条
link.setAttribute('fill', 'none');

Erouter.appendChild(svg);
svg.appendChild(link);

额外说明 #

• 命名空间http://www.w3.org/2000/svg是W3C标准规定的SVG元素创建必须项，普通createElement生成的节点不会被浏览器解析为SVG内容。
• 合并样式时优先使用style.cssText或逐个设置style.xxx，避免多次setAttribute("style")导致样式丢失。

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