如何在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。

当前回答

使用D3:

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

selection.raise()

2017-11-14 12:47:45

其他回答

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

另一种解决方案是使用div，它使用zIndex来包含SVG元素。在这里: https://stackoverflow.com/a/28904640/4552494

2015-03-06 18:15:41

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

2023-01-16 15:53:08

这很容易做到:

克隆你的物品对克隆项进行排序替换克隆项

2019-04-05 00:54:11

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

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索引?

推荐文章

最新文章

标签