如何调整SVG元素层叠顺序，无需修改DOM顺序即可让foreignObject置顶？

方法1：使用现代浏览器支持的CSS z-index #

主流现代浏览器（Chrome 80+、Firefox 72+、Safari 13.1+）已经支持对SVG元素应用z-index，只需要给同级的两个g节点添加position: relative属性即可触发z-index生效，完全不需要修改DOM结构：

/* 给zones设置更高的z-index，就能让它内部的所有元素显示在selected-zones上方 */
#zones {
  position: relative;
  z-index: 10;
}
#selected-zones {
  position: relative;
  z-index: 1;
}

如果只需要让zones内单个正在编辑的foreignObject置顶，也可以直接给这个foreignObject加上述属性，不用调整父节点层级。

方法2：兼容旧浏览器的复用方案 #

如果需要兼容不支持SVG 2 z-index的旧浏览器，可以用<use>节点复用的方案，不改动原有两个g节点的顺序：

• 给需要置顶的zones下的polygon节点添加唯一id，比如id="editing-polygon"
• 在父SVG的末尾新增一个专门用来承载置顶内容的g节点：<g id="top-container"></g>
• 需要置顶时，在#top-container内插入<use href="#editing-polygon" />，同时给原polygon节点设置visibility: hidden避免重复渲染
• 编辑结束后移除<use>节点，恢复原polygon的可见性即可

该方案兼容所有支持SVG的浏览器，原节点的事件绑定、样式都会正常生效。

方法3：临时抽离单个元素到顶层容器 #

如果只是需要让某个正在编辑的foreignObject置顶，可以直接把这个foreignObject节点从原位置移动到最外层的顶层容器中，通过计算坐标偏移保证它的显示位置不变，编辑完成后再移回原父节点即可，不会影响原有两个g节点的DOM顺序。

内容的提问来源于stack exchange，提问作者Андрей Мельник