本文解决 SVG 元素在 DOM 中可见但不渲染的问题：根源在于误用 setAttributeNS() 为普通 SVG 属性添加命名空间，正确做法是使用无命名空间的 setAttribute()。
本文解决 svg 元素在 dom 中可见但不渲染的问题：根源在于误用 `setattributens()` 为普通 svg 属性添加命名空间，正确做法是使用无命名空间的 `setattribute()`。
在使用 JavaScript 动态操作 SVG 时，一个常见却极易被忽视的陷阱是：SVG 元素本身必须在 SVG 命名空间中创建（需用 document.createElementNS()），但其绝大多数属性（如 x、y、width、height、stroke、fill 等）属于“本地属性”（local attributes），不应指定命名空间 URI。
在你的示例代码中：
sh_el.setAttributeNS(svgNS, "x", "150"); sh_el.setAttributeNS(svgNS, "y", "150"); sh_el.setAttributeNS(svgNS, "stroke", "blue"); // ……
虽然 setAttributeNS(namespace, qualifiedName, value) 语法合法，但将 svgNS（即 "http://www.w3.org/2000/svg"）作为命名空间传入，会导致浏览器尝试将这些属性注册为带前缀的命名空间属性（例如 svg:x），而 SVG 渲染引擎只识别无前缀的标准属性。因此，尽管 <rect> 元素成功插入 DOM 并能在开发者工具中看到，其关键布局与样式属性实际未被解析——结果就是元素“存在但不可见”。
✅ 正确写法是：
立即学习“Java免费学习笔记（深入）”；
- 使用 createElementNS(svgNS, 'rect') 创建元素（必须，确保元素类型归属 SVG 命名空间）；
- 对所有标准 SVG 属性，统一使用 element.setAttribute(name, value)（无命名空间版本）。
修正后的完整代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>xyz</title>
</head>
<body>
<div>
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" width="360" height="360">
<line x1="1" y1="1" x2="359" y2="359" stroke="black"/>
<circle cx="100" cy="100" r="25.17" fill="#00ffff" stroke="red"/>
</svg>
</div>
</body>
<script>
const svgNS = "http://www.w3.org/2000/svg";
const svg_el = document.getElementById("mysvg");
const rect = document.createElementNS(svgNS, "rect");
// ✅ 关键修正：使用 setAttribute，而非 setAttributeNS
rect.setAttribute("x", "150");
rect.setAttribute("y", "150");
rect.setAttribute("width", "10");
rect.setAttribute("height", "40");
rect.setAttribute("fill", "none"); // 推荐显式设 fill="none"，避免默认填充干扰
rect.setAttribute("stroke", "blue");
rect.setAttribute("stroke-width", "2");
svg_el.appendChild(rect);
</script>
</html>? 补充说明：
- setAttributeNS(null, name, value) 在部分场景下也可工作（null 表示无命名空间），但 setAttribute() 更语义清晰、兼容性更好，是 SVG 属性设置的事实标准；
- 特殊属性如 xlink:href（已废弃，现代推荐用 href）、xml:space 等才需 setAttributeNS，且需对应正确命名空间（如 "http://www.w3.org/1999/xlink"）；
- 若需动态设置 CSS 样式（如 stroke-width），也可用 rect.style.strokeWidth = "2"（注意驼峰命名），但内联属性更符合 SVG 原生习惯。
? 总结：
SVG 元素创建靠 createElementNS，属性赋值靠 setAttribute —— 命名空间仅作用于元素类型，不作用于标准属性。
这一原则同样适用于 <g>、<path>、<text> 等所有 SVG 元素，是保障动态 SVG 渲染可靠的底层基础。
