Với JavaScript, tôi có thể thay đổi chỉ mục / lớp Z của phần tử SVG <g> không?

Giả sử tôi có một vài hình dạng tổng hợp ( <g>). Tôi muốn có thể nhấp và kéo chúng, nhưng tôi muốn cái mà tôi đang kéo vào lúc này ở trên đầu cái kia theo thứ tự Z, để nếu tôi kéo nó qua cái KHÁC, cái kia một cái nên bị lu mờ.

Chỉ mục Z trong SVG được xác định theo thứ tự các phần tử xuất hiện trong tài liệu. Bạn sẽ phải thay đổi thứ tự phần tử nếu bạn muốn đưa một hình dạng cụ thể lên trên cùng.

Một cách thay thế cho các phần tử di chuyển trong cây là sử dụng <use>các phần tử mà bạn thay đổi xlink:hrefthuộc tính để nó cung cấp cho bạn thứ tự z bạn muốn.

Đây là một chủ đề cũ trên danh sách gửi thư của nhà phát triển svg thảo luận về chủ đề này trong bối cảnh bạn muốn tạo hoạt ảnh cho một số hình dạng.

Cập nhật:

<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>

Trong ví dụ này, phần tử <use> là phần tử cuối cùng, khiến nó trở thành phần tử đứng đầu. Chúng tôi có thể chọn bất kỳ phần tử nào khác hoạt động như một phần tử quan trọng nhất chỉ bằng cách thay đổi xlink:hrefthuộc tính. Trong ví dụ trên, chúng tôi chọn vòng tròn với id="c1", làm cho nó xuất hiện như là phần tử trên cùng.

Xem fiddle .

Đây là câu hỏi cũ, nhưng ...

Trên FireFox (7+) và Chrome (14+), bạn có thể kéo svg_element lên đầu. Điều này không cung cấp cho bạn quyền tự do kiểm soát trục z hoàn toàn, nhưng tốt hơn là không có gì;)

Chỉ cần nối phần tử đó lại.

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

Tôi nghĩ rằng nó sẽ tạo ra một lỗi hay gì đó.

appendChild == tự thay thế == vẽ lại

Một giải pháp khác không được đề cập là đặt mỗi mục / bộ mục svg vào một div. Bạn có thể thay đổi chỉ số z của các div một cách dễ dàng.

Fiddle: Các phần tử SVG chu kỳ với chỉ số z cho vùng chứa

... Nhấn vào các nút để 'đẩy' phần tử đó lên phía trước. (so với việc sơn lại toàn bộ và đẩy 1 phần tử lên trước, nhưng vẫn giữ thứ tự ban đầu như trong giải pháp được chấp nhận)

Sẽ rất tốt nếu có các chỉ số z tương đối ...

stackOverflow muốn tôi đặt mã nếu đó là liên kết từ jsfiddle? ... ook

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>

Có, thứ tự là thứ chỉ định đối tượng nào sẽ ở phía trước đối tượng kia. Để điều chỉnh thứ tự, bạn sẽ cần di chuyển mọi thứ về DOM. Có một ví dụ điển hình về điều này trên SVG wiki tại https://www.w3.org/TR/SVG11/render.html#RenderingOrder

Nếu bạn sử dụng thư viện svg.js , bạn có thể sử dụng lệnh ".front ()" để di chuyển bất kỳ phần tử nào lên trên cùng.

SVGsử dụng một "mô hình họa sĩ" để kết xuất. Sơn được áp dụng trong các hoạt động liên tiếp cho thiết bị đầu ra sao cho mỗi thao tác sơn trên một số khu vực của thiết bị đầu ra. Khi khu vực này chồng lên một khu vực đã sơn trước đó, sơn mới che khuất một phần hoặc hoàn toàn khu vực cũ. - liên kết đến điều này

Trong SVG, để có được chỉ số Z lớn hơn cao hơn, bạn nên di chuyển phần tử xuống trong cây DOM. Bạn có thể thực hiện việc này với jQuery, chọn phần tử SVG, xóa nó và nối lại ở vị trí bạn muốn:

$('g.element').remove().appendTo('svg');

Nhận xét của Adam Bradley đối với câu trả lời của Sam là chính xác. Nó sử dụng jQuery thay vì chỉ CSS, nhưng anh ấy đã nói thế này:

$('#thing-i-want-on-top').appendTo('#my-svg');

Tuy nhiên, đối với những gì tôi đang tạo, tôi cần Đường dẫn SVG của mình ở trên bất kỳ đường dẫn nào khác khi di chuột, nhưng vẫn ở dưới Văn bản SVG của tôi. Vì vậy, đây là những gì tôi đã nghĩ ra:

$('#thing-i-want-on-top').insertBefore('#id-for-svg-text');

Cả appendTo và insertBefore sẽ di chuyển phần tử của bạn đến vị trí mới cho phép bạn thay đổi độ sâu của phần tử SVG theo ý muốn.