必须用createElementNS创建SVG元素并传入命名空间URI“http://www.w3.org/2000/svg”，否则浏览器将其视为普通HTML标签导致不渲染；属性设置需区分命名空间，xlink:href等须用setAttributeNS。
操作 SVG 或 XML 元素时，必须显式指定命名空间，否则浏览器会把 svg、circle 等当作普通 HTML 标签处理，导致图形不渲染或行为异常。核心就一条：用 createElementNS 替代 createElement，并传入正确的命名空间 URI。
SVG 元素必须用 createElementNS 创建
SVG 是基于 XML 的格式，所有元素都属于 http://www.w3.org/2000/svg 命名空间。直接写 document.createElement('svg') 生成的是 HTML 元素，不会被识别为可渲染的矢量图形。
- 正确写法：
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - 子元素同理：
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - 建议把命名空间 URI 提前定义为常量，避免拼写错误：
const SVG_NS = 'http://www.w3.org/2000/svg';
属性设置要区分命名空间上下文
SVG 属性分两类：普通属性（如 fill、cx）和带命名空间的属性（如 xlink:href）。设置方式不同，不能混用。
- 无命名空间属性（大多数）：用
setAttribute('fill', 'blue')或setAttribute('r', '20') - 带命名空间属性（如
xlink:href）：必须用setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#mySymbol') - 注意：不要用点号赋值（如
el.fill = 'red'），SVG 属性不是 JS 对象属性，那样无效
XML 元素结构操作也依赖命名空间
如果操作的是非 SVG 的自定义 XML（比如配置文件、数据交换文档），同样需用 createElementNS，只是命名空间 URI 换成你自己的或标准定义的。
- 例如创建一个带前缀的自定义元素：
const item = doc.createElementNS('https://example.com/ns/data', 'data:item'); - 查询时也要配合命名空间：
doc.getElementsByTagNameNS('https://example.com/ns/data', 'item') - 若 XML 文档已加载（如通过
fetch+response.xml），其节点天然携带命名空间信息，直接操作即可
插入与事件绑定按标准 DOM 流程走
一旦元素正确创建并设好属性，后续操作就和 HTML DOM 完全一致，无需额外适配。
- 插入到页面：
container.appendChild(svg)，前提是容器是 HTML 元素（如div） - 添加子元素：
svg.appendChild(circle)，顺序和层级关系由appendChild/insertBefore控制 - 绑定事件：
circle.addEventListener('click', handler)，SVG 元素支持所有标准事件类型 - 注意：不要用
innerHTML更新 SVG 内容，可能破坏命名空间上下文，改用 DOM 方法增删节点
