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

-1

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

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

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

来源

2017-03-08 details1

http://stackoverflow.com/questions/17786618/how-to-use-z-index-in-svg-elements –

SVG中没有z索引。在SVG中，元素的顺序定义了“绘画”的顺序，而绘画的顺序则定义了谁是最重要的。规格清晰：

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

因此，你必须重新定位的元素。有一个很简单的解决方案，只是做：

selection.raise();

抬起重新插入每个选定的元素，以作为其母公司的最后一个孩子。

这里是一个演示，将鼠标悬停在圆圈把它带到顶端：

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

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

注意raise()将只在同一级元素工作（即，具有相同的父元素）。

来源

2017-03-09 00:18:32

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

回答

相关问题