我在我的项目中使用svg圆圈,像这样,

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
    <g>
        <g id="one">
            <circle fill="green" cx="100" cy="105" r="20" />
        </g>
        <g id="two">
            <circle fill="orange" cx="100" cy="95" r="20" />
        </g>
    </g>
</svg>

我在g标签中使用z索引来显示第一个元素。在我的项目中,我只需要使用z-index值,但我不能使用我的svg元素的z-index。我在谷歌上搜了很多,但没有找到相关的东西。 所以请帮助我在我的svg中使用z-index。

这里是DEMO。


当前回答

Use可以达到这个目的,但是那些被放置在Use help之后的元素很难操作…… 在我使用它之后,我不明白的是:为什么我不能在use元素上悬停(无论是鼠标悬停,鼠标进入操作都不能工作)来获得额外的功能-比如~在圆圈上显示文本~ 之后返回到圆圈重新排序,因为这是操作svg对象的唯一方式

其他回答

如前所述,svg按顺序呈现,(目前)不考虑z-index。也许只是把特定的元素发送到它的父元素的底部,这样它就会最后呈现。

function bringToTop(targetElement){
  // put the element at the bottom of its parent
  let parent = targetElement.parentNode;
  parent.appendChild(targetElement);
}

// then just pass through the element you wish to bring to the top
bringToTop(document.getElementById("one"));

为我工作。

更新

如果您有一个嵌套的SVG,其中包含组,则需要将项目从其parentNode中取出。

function bringToTopofSVG(targetElement){
  let parent = targetElement.ownerSVGElement;
  parent.appendChild(targetElement);
}

SVG的一个很好的特性是每个元素都包含它的位置,而不管它嵌套在哪个组中:+1:

使用D3:

如果希望按顺序重新插入每个选定元素,将其作为其父元素的最后一个子元素。

selection.raise()

试着颠倒# 1和# 2。看看这个小提琴:http://jsfiddle.net/hu2pk/3/

更新

在SVG中,z-index由元素在文档中出现的顺序定义。如果你愿意,你也可以看看这个页面:https://stackoverflow.com/a/482147/1932751

使用D3:

如果你想以相反的顺序将元素添加到数据中,使用:

.insert(“g”、”:第一个孩子”)

而不是。append('g')

将一个元素添加到组元素的顶部

正如其他人所说,z-index是由元素在DOM中出现的顺序定义的。如果手动重新排序你的html不是一个选项或将是困难的,你可以使用D3重新排序SVG组/对象。

使用D3更新DOM顺序和模仿Z-Index功能

使用D3更新SVG元素Z-Index

在最基本的级别上(如果您没有将id用于其他任何事情),您可以使用元素id作为z-index的替代品,并使用它们进行重新排序。除此之外,你几乎可以让你的想象力自由发挥。

代码片段中的示例

var circles = d3.selectAll('circle') var label = d3.select('svg').append('text') .attr('transform', 'translate(' + [5,100] + ')') var zOrders = { IDs: circles[0].map(function(cv){ return cv.id; }), xPos: circles[0].map(function(cv){ return cv.cx.baseVal.value; }), yPos: circles[0].map(function(cv){ return cv.cy.baseVal.value; }), radii: circles[0].map(function(cv){ return cv.r.baseVal.value; }), customOrder: [3, 4, 1, 2, 5] } var setOrderBy = 'IDs'; var setOrder = d3.descending; label.text(setOrderBy); circles.data(zOrders[setOrderBy]) circles.sort(setOrder); <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 100"> <circle id="1" fill="green" cx="50" cy="40" r="20"/> <circle id="2" fill="orange" cx="60" cy="50" r="18"/> <circle id="3" fill="red" cx="40" cy="55" r="10"/> <circle id="4" fill="blue" cx="70" cy="20" r="30"/> <circle id="5" fill="pink" cx="35" cy="20" r="15"/> </svg>

基本思想是:

Use D3 to select the SVG DOM elements. var circles = d3.selectAll('circle') Create some array of z-indices with a 1:1 relationship with your SVG elements (that you want to reorder). Z-index arrays used in the examples below are IDs, x & y position, radii, etc.... var zOrders = { IDs: circles[0].map(function(cv){ return cv.id; }), xPos: circles[0].map(function(cv){ return cv.cx.baseVal.value; }), yPos: circles[0].map(function(cv){ return cv.cy.baseVal.value; }), radii: circles[0].map(function(cv){ return cv.r.baseVal.value; }), customOrder: [3, 4, 1, 2, 5] } Then, use D3 to bind your z-indices to that selection. circles.data(zOrders[setOrderBy]); Lastly, call D3.sort to reorder the elements in the DOM based on the data. circles.sort(setOrder);


例子

可以按ID进行堆叠


最左边的SVG在上面


上面的半径最小


或者指定一个数组来为特定的顺序应用z-index——在我的示例代码中,数组[3,4,1,2,5]移动/重新排序第3个圆(在原始HTML顺序中),使其在DOM中处于第1位,第4位为第2位,第1位为第3位,以此类推……