SVG内部元素不认z-index，层级由DOM书写顺序决定：后写的元素覆盖先写的元素；外层容器的z-index仅影响SVG整体在HTML中的堆叠顺序，不影响内部元素层级。
SVG内部元素不认z-index，这不是浏览器的限制，而是SVG规范本身的设计逻辑——它用DOM书写顺序决定谁盖在谁上面，而不是靠CSS层叠上下文。
SVG层级只看DOM顺序，不看z-index
在<svg></svg>标签里，<rect></rect>、<circle></circle>、<text></text>这些元素谁显示在最上层，完全取决于它们在HTML中出现的先后位置：后写的元素自动覆盖先写的元素。哪怕你给<text></text>加了position: relative; z-index: 9999，浏览器也会忽略，开发者工具里该属性会显示为“not applicable”或直接置灰。
- 想让文字浮在图形上方？把它写在所有
<path></path>、<g></g>之后 - 想让某个图标沉到底部？把它移到
<svg></svg>开头 - 用JS动态调整时，优先用
.appendChild()把目标元素挪到<svg></svg>末尾，比改样式更可靠
外层容器的z-index只影响SVG整体
如果你给SVG外面包了一层<div style="z-index: 10"><svg>...</svg></div>，这个z-index只控制这个<div>相对于其他HTML元素的位置，比如是否盖住旁边的按钮或导航栏。它对SVG内部两个重叠的圆形谁在上、谁在下毫无影响。
<ul>
<li>整个SVG块像一张“透明胶片”，<code>z-index只能决定胶片放在第几层，不能决定胶片上画的两笔谁压谁
别踩这些常见误区
很多开发者习惯用HTML的思维操作SVG，结果发现样式没反应。以下做法在SVG中全部无效：
- 给
<svg></svg>加position: relative，再试图用z-index控制子元素 - 对
<g></g>应用transform，以为能触发新的层叠上下文 - 用
display: none临时隐藏某个图形，之后再show——这会破坏原有DOM顺序，导致层级错乱 - 依赖
css paint-order跨元素调序（它只管单个元素内填充/描边/标记的绘制先后）
真正可控的替代方案
当DOM顺序无法满足动态需求时，可借助分组与JS逻辑绕过限制：
- 把需要切换层级的图形分别放进不同
<g id="top-layer"></g>和<g id="base-layer"></g>，用parentNode.insertBefore()交换整组位置 - 隐藏图形优先用
opacity: 0或visibility: hidden，保留其DOM位置 - 复杂交互场景（如地图图层、图表高亮）建议用React Native SVG等封装库，它提供了真正的
zIndex属性支持
