如何在svg元素中使用z索引?

我在我的项目中使用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。

当前回答

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

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

使用D3更新SVG元素Z-Index

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

代码片段中的示例

基本思想是:

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位，以此类推……

2016-04-20 07:01:29

其他回答

只是想添加一个技巧，当你想把一个特定的元素放在上面。

function moveInFront(element) {
    const svg = element.closest('svg'); // Find the parent SVG
    svg.appendChild(element); // Append child moves the element to the end
}

这是因为(引用文档)“appendChild()将[元素]从当前位置移动到新位置”，而不是添加一个副本。

注意:如果元素是嵌套的，则必须在组内将元素移动到前面，也许还必须将组移动到前面。

2022-11-18 21:20:48

如前所述，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:

2017-11-15 03:25:18

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

更新

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

2013-07-22 11:44:28

规范

在SVG规范1.1版本中，呈现顺序是基于文档顺序的:

first element -> "painted" first

参考SVG 1.1。规范

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

解决方案(cleaner-faster)

你应该把绿色的圆圈作为最近要绘制的对象。交换这两个元素。

这里是jsFiddle的fork。

解决方案(选择)

该标记与属性xlink:href(对于SVG 2只是href)一起使用，并将元素的id作为值。请记住，这可能不是最好的解决方案，即使结果看起来很好。有一点时间，这里是规范SVG 1.1“use”元素的链接。

目的: 避免要求作者修改所引用的文档以向根元素添加ID。

关于SVG 2的说明

SVG 2规范是下一个主要版本，仍然支持上述特性。

3.4. Rendering order Elements in SVG are positioned in three dimensions. In addition to their position on the x and y axis of the SVG viewport, SVG elements are also positioned on the z axis. The position on the z-axis defines the order that they are painted. Along the z axis, elements are grouped into stacking contexts. 3.4.1. Establishing a stacking context in SVG ... Stacking contexts are conceptual tools used to describe the order in which elements must be painted one on top of the other when the document is rendered, ...

SVG 2支持Mozilla -绘画我如何知道我的浏览器是否支持svg 2.0 我可以使用SVG吗? 对于SVG 2，使用href代替额外的已弃用名称空间XLink:href(感谢G07cha)

2014-08-14 07:23:10

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

2023-01-16 15:53:08

如何在svg元素中使用z索引?

推荐文章

最新文章

标签