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