Javascript 如何操作现有SVG中的元素层？

我使用d3操作现有的svg。svg似乎有多个层。我能够得到一个预期元素的句柄，并用d3操作它。但是，该元素位于较低的层上。例如，我可以通过d3在元素上设置笔划（边框颜色）和笔划宽度，我可以看到更新后的边框从具有相同形状的更高层下方向外扩展

我需要弄清楚如何动态地根据需要更改元素层。我试着将我要提升的图层的z索引样式和属性设置为999。svg中不存在其他z-index属性，因此我的假设是，将元素z-index设置为999很可能会将其提升到顶部，但这并没有发生。这个假设主要基于我的html/css背景

---

你能推荐一些基本的故障排除步骤吗？svg分层实现和操作是否比我想象的更复杂？您可以推荐任何资源或可能的快捷方式吗？

SVG中没有z索引。在SVG中，元素的顺序定义了“绘制”的顺序，绘制的顺序定义了谁在顶部。规格很明确：

SVG文档片段中的元素具有隐式的绘图顺序，SVG文档片段中的第一个元素首先被“绘制”。后续图元绘制在先前绘制的图元之上

因此，您必须重新定位元素。有一个非常简单的解决方案，只需执行以下操作：

selection.raise();

Raise按顺序重新插入每个选定元素作为其父元素的最后一个子元素

这是一个演示，将鼠标悬停在圆圈上方，将其置于顶部：

d3.选择全部（“圆圈”）。在（“鼠标悬停”，函数（）上）{
d3.选择（此）.raise（）
});