IT技术 - 使用 JavaScript，我可以更改 SVG <g> 元素的 Z 索引/层吗？ - 吾爱随笔录

使用 JavaScript，我可以更改 SVG <g> 元素的 Z 索引/层吗？

IT技术 javascript svg

2021-02-04 02:08:51

假设我有几个复合形状 ( <g>)。我希望能够点击并拖动它们，但我希望我现在正在拖动的那个在 Z 顺序中位于另一个的顶部，这样如果我将它拖过另一个，另一个一个应该黯然失色。

6个回答

SVG 中的 Z 索引由元素在文档中出现的顺序定义。如果要将特定形状带到顶部，则必须更改元素顺序。

@chharvey，您可以通过重新排序将内容浮动到顶部 - 重新附加。这是一个优雅的例子：codepen.io/osublake/pen/YXoEQe

2021-03-15 02:08:51

jQuery 不支持更改 SVG 路径的顺序。

2021-03-17 02:08:51

所以，基本上，没有办法在悬停时将形状浮动到顶部（z 轴）......？

2021-03-20 02:08:51

@theonlygusti 文档末尾的元素位于顶部。如果你使用 jQuery，你应该能够使用类似的东西$('#thing-i-want-on-top').appendTo('#my-svg');

2021-04-10 02:08:51

在树中移动元素的替代方法是使用<use>更改xlink:href属性的元素，以便它为您提供所需的 z 排序。

这是svg-developers 邮件列表上的一个旧线程，在想要为某些形状设置动画的背景下讨论了这个主题。

更新：

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     style="width:100%; height: 100%">
    <circle id="c1" cx="50" cy="50" r="40" fill="lime" />
    <rect id="r1" x="4" y="20" width="200" height="50" fill="cyan" />
    <circle id="c2" cx="70" cy="70" r="50" fill="fuchsia" />
    <use id="use" xlink:href="#c1" />
</svg>

在这个例子中， <use> 元素是最后一个，这使它成为最前面的元素。我们可以通过更改xlink:href属性来选择任何其他元素作为最前面的元素。在上面的示例中，我们选择了带有的圆圈id="c1"，这使其显示为最顶部的元素。

见小提琴。

xlink:href 已弃用，现在只是 href

2021-03-19 02:08:51

有效，但让您适当添加使用。如果你使用翻译，<use> 对它们一无所知

2021-03-24 02:08:51

这个答案会是多少更多有用的一个例子，或者从邮件列表的信息（这是进行分选）。

2021-03-29 02:08:51

对此不是很清楚。如果使用嵌套的 <g> 标签进行变换，则需要使用 getTransformToElement(..); 转换坐标。（参见 SVG 文档）

2021-04-02 02:08:51

@JochenBedersdorfer 不确定您的意思，翻译与 z 排序有何关系？

2021-04-12 02:08:51

这是一个老问题，但是......

在 FireFox (7+) 和 Chrome (14+) 上，您可以将 svg_element 拉到顶部。这不会给你完全 z 轴控制的自由，但总比没有好 ;)

只需再次附加该元素。

var svg = doc.createElemNS('svg');
var circle = doc.createElemNS('circle');
var line = doc.createElemNS('line');

svg.appendChild(circle); // appends it
svg.appendChild(line);   // appends it over circle
svg.appendChild(circle); // redraws it over line now

我以为它会抛出错误或其他什么。

appendChild == 替换自身 == 重绘

根本不是错误；appendChild首先从旧父级中删除，如果有的话，即使它与新父级相同，然后将其添加到新父级的子级列表中。

2021-04-12 02:08:51

另一个未提及的解决方案是将每个 svg 项目/项目集放入一个 div。您可以轻松更改 div 的 z-index。

小提琴：SVG 元素循环使用容器的 z-index

...按下按钮将该元素“推”到前面。（与重新绘制整个集合并将 1 个元素推到前面，但保持原始顺序与已接受的解决方案相同）

拥有相对 z 索引会非常好......

如果它是来自 jsfiddle 的链接，stackOverflow 想让我把代码放上来？...好吧

显示代码片段

var orderArray=[0,1,2];
var divArray = document.querySelectorAll('.shape');
var buttonArray = document.querySelectorAll('.button');

for(var i=0;i<buttonArray.length;i++){
    buttonArray[i].onclick=function(){
        var localI = i;
        return function(){clickHandler(orderArray.indexOf(localI));};
    }();
}


function clickHandler(divIndex) {
     orderArray.push(orderArray.splice(divIndex, 1)[0]);
    orderDivs();
}

function orderDivs(){
    for(var i=0;i<orderArray.length;i++){
       divArray[orderArray[i]].style.zIndex=i;        
    }
}

svg {
    width: 100%;
    height: 100%;
    stroke: black;
    stroke-width:2px;
    pointer-events: all;
}
div{
    position:absolute;
}
div.button{
    top:55%;
    height:5%;
    width:15%;
    border-style: outset;
    cursor:pointer;
    text-align: center;
    background:rgb(175, 175, 234);
    
}
div.button:hover{
    border-style: inset;
    background:yellow;
    
}
div.button.first{
    left:0%;
}
div.button.second{
    left:20%;
}
div.button.third{
    left:40%;
}

<div class="shape">
    <svg>
    <circle cx="50" cy="50" r="40" fill="lime" />
    </svg>
</div>
<div class="shape">
    <svg>
        <rect x="4" y="20" width="200" height="50" fill="cyan" />
    </svg>
</div>
<div class="shape">
    <svg>
        <circle cx="70" cy="70" r="50" fill="fuchsia" />
    </svg>
</div>

<div class='button first'>lime</div>
<div class='button second'>cyan</div>
<div class='button third'>fuchsia</div>

是的，顺序是指定哪个对象将在另一个对象之前。要操作顺序，您需要移动有关 DOM 的内容。SVG wiki 上有一个很好的例子，网址为https://www.w3.org/TR/SVG11/render.html#RenderingOrder

该链接不再有效。此链接解释了相同的想法：链接

2021-03-16 02:08:51

其它你可能感兴趣的问题

上一篇Angular 2.1.0 动态创建子组件下一篇如何转义 HTML 属性值中的引号？