SVG 绘图顺序

这可能令人沮丧：你使用 D3.js 进行可视化，但你想要在顶部的矩形隐藏在另一个矩形后面，或者你计划在某个圆圈后面的线实际上是在它上面。你尝试使用 CSS 中的 z-index 解决此问题，但它不起作用（在 SVG 1.1 中）。

解释很简单：在 SVG 中，元素的顺序定义了绘画的顺序，绘画的顺序定义了谁在顶部。

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

所以，假设我们有这个 SVG：

<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" z-index="-1"></circle>
</svg>

他有四个圈子。蓝色圆圈是第一个画，所以其他所有人都会贬低。然后我们有黄色的那个，然后是红色的，最后是绿色的。绿色的是最后一个，它将位于顶部。

这就是它的样子：

http://i.stack.imgur.com/1t3eC.jpg

用 D3 改变 SVG 元素的顺序

那么，是否有可能改变元素的顺序？我可以在绿色圆圈前面制作红色圆圈吗？

是。你需要考虑的第一种方法是代码中的行的顺序：首先绘制背景的元素，然后在代码中绘制前景的元素。

但是我们可以动态地改变元素的顺序，即使它们被绘制后也是如此。你可以编写几个简单的 JavaScript 函数来执行此操作，但 D3 已经有两个很好的功能，selection.raise() 和 selection.lower()。

根据 API：

selection.raise()：按顺序重新插入每个选定元素作为其父元素的最后一个子元素。selection.lower()：按顺序重新插入每个选定元素作为其父元素的第一个子元素。

因此，为了展示如何操作我们之前的 SVG 中元素的顺序，这里是一个非常小的代码：

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

它有什么作用？它选择所有圆圈，当用户将鼠标悬停在一个圆圈上时，它会选择该特定圆圈并将其带到前面。非常简单！

而这里是的 jsfiddle 与实时代码。