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

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

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

而不是。append('g')

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

其他回答

使用D3:

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

selection.raise()

svg没有z指数。但是svg根据元素在DOM中的位置来确定它们的最上面。因此,您可以删除Object并将其放置到svg的末尾,使其成为“最后渲染”元素。然后将其呈现为视觉上的“最顶层”。


使用jQuery:

function moveUp(thisObject){
    thisObject.appendTo(thisObject.parents('svg>g'));
}

用法:

moveUp($('#myTopElement'));

使用D3.js:

d3.selection.prototype.moveUp = function() {
    return this.each(function() {
        this.parentNode.appendChild(this);
    });
};

用法:

myTopElement.moveUp();

使用D3:

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

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

而不是。append('g')

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

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

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

<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