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

Question

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

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

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

Answer 1

SVG 中没有 z-index。在 SVG 中，元素的顺序定义了“绘画”的顺序，而绘画的顺序定义了谁在上面。规格很明确：

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

因此，您必须重新定位元素。有一个非常简单的解决方案，只需这样做：

selection.raise();

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

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

d3.selectAll("circle").on("mouseover", function(){
	d3.select(this).raise()
});

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="400" height=200>
	<circle cy="100" cx="80" r="60" fill="blue"></circle>
	<circle cy="100" cx="160" r="60" fill="yellow"></circle>
	<circle cy="100" cx="240" r="60" fill="red"></circle>
	<circle cy="100" cx="320" r="60" fill="green"></circle>
</svg>

请注意，raise() 仅适用于同一级别中的元素（即具有相同的父元素）。