JavaScript动态创建SVG元素属性不生效的常见解决方法
先给出一个核心要点：SVG 元素创建必须使用 createElementNS，属性赋值统一用 setAttribute —— 命名空间仅决定元素类型，不涉及标准属性。 没有理清这一原则，极易在动态 SVG 开发中踩坑。
在使用 JavaScript 动态操作 SVG 时，一个常见但容易被忽视的误区是：虽然元素本身必须在 SVG 命名空间下创建，但其多数属性（如 x、y、width、height、stroke、fill 等）都属于“本地属性”，无需指定命名空间 URI。如果混淆两者，结果往往是——元素在 DOM 中可见，页面上却无法正常渲染。
看看典型的错误写法：
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 渲染引擎只识别不带前缀的标准属性。因此尽管
正确的做法是：
- 使用
createElementNS(svgNS, 'rect')创建元素，这一步必须执行，确保元素类型归属于 SVG 命名空间。 - 对所有标准 SVG 属性，统一使用
element.setAttribute(name, value)，即不带命名空间的版本。
修正后的完整示例：
xyz
补充几个关键要点：
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 —— 命名空间仅作用于元素类型，不作用于标准属性。
这一原则同样适用于、、等所有 SVG 元素，是保证动态 SVG 稳定渲染的底层基础。