SVG内部元素不支持z-index，因其渲染依赖DOM书写顺序而非CSS层叠上下文；唯一可靠层级控制方式是调整元素在<svg>中的先后位置。
SVG内部元素不支持z-index
直接给<path>、<circle>等SVG子元素设z-index无效——SVG有自己的绘制顺序规则，它完全不解析z-index属性。哪怕你加了position: relative也没用，因为SVG元素默认不是CSS定位上下文中的“定位元素”，position在SVG内多数情况下被忽略。
控制SVG内部叠加顺序只能靠DOM顺序
SVG渲染严格遵循XML节点顺序：后写的元素画在前面元素之上。这不是“可以配置的样式行为”，而是规范强制行为。
- 想让红色圆盖住蓝色矩形？把
<circle>写在<rect>后面 - 动态插入时，用
appendChild()或insertAdjacentElement('beforeend', ...)确保新元素追加到父<g>或<svg>末尾 - 用CSS
transform: translateZ(...)不能改变SVG内元素Z序，只影响整个<svg>块在页面中的层叠（即外部z-index）
想让SVG整体浮在HTML内容上方？用外层容器控制
如果你的目标是“让整个SVG盖住页面其他div”，那才是z-index该管的事——但它作用对象必须是SVG的宿主容器，而不是SVG内部元素。
- 给包裹
<svg>的<div>设position: relative和z-index: 100 - 避免给
<svg>本身设position或z-index，它不响应这些声明 - 注意：若该容器有
opacity < 1或transform，会创建新层叠上下文，导致其内部所有SVG内容被“框死”在这个层级里，无法突破到更高层
需要精细控制SVG内多层交互？换方案
当业务逻辑要求路径之间动态切换前后关系（比如点击切换高亮路径、拖拽重排序），纯SVG DOM顺序难以维护。这时更可靠的做法是：
立即学习“前端免费学习笔记（深入）”；
- 用JavaScript控制
element.parentNode.appendChild(element)实时调整节点位置 - 拆分成多个
<svg>块，每个块只含一层语义元素，再用外层容器z-index管理整体层级 - 对复杂交互场景，考虑用Canvas重绘，或迁移到WebGL库（如Three.js），它们提供显式的Z-buffer或depth buffer控制
别在<path>上写z-index——它根本不会被计算，连DevTools的Computed面板里都找不到这一项。真正起效的永远是节点顺序或宿主容器的定位与z-index组合。
