Question

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

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

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

Answer 1

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

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

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

selection.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()仅适用于同一级别中的元素（即具有相同的父元素）。

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

1 个答案: