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

当前回答

你可以利用利用。

<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>
    <use xlink:href="#one" />
</svg>

绿色圆圈出现在顶部。 jsFiddle

2014-10-09 11:36:36

其他回答

正如其他人所说，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

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

2015-03-06 18:15:41

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();

2016-10-24 22:22:45

通过transform:TranslateZ移动到前面

警告:仅适用于FireFox

2020-10-08 01:29:12

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

推荐文章

最新文章

标签