SVG渲染顺序由DOM节点书写顺序决定，先写在底层、后写在上层，不受z-index影响；<g>组内整体遵循其在父容器中的位置；动态操作如appendChild或insertBefore可实时调整层级；关键交互元素应统一append至底部以避免遮挡。
SVG渲染优先级由元素在代码中的书写顺序决定，先写的在底层，后写的在上层——和DOM节点的绘制顺序完全一致，不是CSS z-index 控制的层叠上下文。
渲染顺序即DOM顺序
SVG没有独立的“图层管理器”，它的视觉堆叠完全依赖于XML节点的先后位置。比如：
- 写在前面的 <rect> 会被后面出现的 <circle> 盖住
- 包裹在 <g> 中的整组图形，整体遵循该 <g> 在父容器中的位置
- 即使 <g transform="translate(0, -10)"> 把内容往上挪，也不会让它“浮到更上层”，只是坐标偏移
DOM结构调整直接影响显示效果
移动、插入或删除SVG子元素，会实时改变渲染层级。常见操作包括：
- 用 appendChild() 把某个 <path> 加到最后，它就自动变成最上层图形
- 调用 insertBefore(newEl, refEl) 可精准控制新元素插在哪个兄弟节点之前
- 直接修改 parentNode.innerHTML 会重建全部子节点，触发重绘，慎用于高频更新场景
避免意外遮挡的实用建议
当多个动态图形叠加时，容易因DOM顺序混乱导致点击失效或视觉错位：
- 给关键交互元素（如按钮图标、热区）统一加 class="interactive"，并在JS中确保它们始终 append 到 SVG 底部
- 用 querySelectorAll("g.interactive") 批量提取后，按需重排顺序，再逐个 appendChild
- 不依赖 opacity: 0 或 visibility: hidden 来“隐藏下层”，它们仍参与渲染顺序；真要隐藏就用 remove() 或 display: none
