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

当前回答

通过transform:TranslateZ移动到前面

警告:仅适用于FireFox

2020-10-08 01:29:12

其他回答

一个更好的例子，我已经用过了。

<svg>
  <defs>
    <circle id="one" fill="green" cx="40" cy="40" r="20" /> 
    <circle id="two" fill="orange" cx="50" cy="40" r="20"/> 
  </defs>
  <use href="#two" />
  <use href="#one" />
</svg>

为了控制顺序，你可以改变这些use元素的href属性值。这对动画制作很有用。

多亏了defs，圆圈元素只绘制一次。

jsfiddle.net/7msv2w5d

2021-11-01 07:17:48

这很容易做到:

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

2019-04-05 00:54:11

使用D3:

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

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

而不是。append('g')

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

2016-04-22 11:29:19

将SVG元素推到最后，这样它的z索引就会在上面。在SVG中，没有称为z-index的属性。尝试下面的javascript把元素放在顶部。

var Target = document.getElementById(event.currentTarget.id);
var svg = document.getElementById("SVGEditor");
svg.insertBefore(Target, svg.lastChild.nextSibling);

目标:是一个我们需要把它放在顶部的元素是元素的容器

2018-07-29 09:12:52

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

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

推荐文章

最新文章

标签