Làm thế nào để sử dụng chỉ số z trong các yếu tố svg?

Tôi đang sử dụng các vòng tròn svg trong dự án của tôi như thế này,

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

Và tôi đang sử dụng chỉ số z trong gthẻ để hiển thị các phần tử đầu tiên. Trong dự án của tôi, tôi chỉ cần sử dụng giá trị z-index, nhưng tôi không thể sử dụng chỉ mục z cho các phần tử svg của mình. Tôi đã googled rất nhiều nhưng tôi không tìm thấy bất cứ điều gì tương đối. Vì vậy, hãy giúp tôi sử dụng z-index trong svg của tôi.

Đây là DEMO.

Sự chỉ rõ

Trong phiên bản đặc tả SVG 1.1, thứ tự kết xuất dựa trên thứ tự tài liệu:

first element -> "painted" first

Tham chiếu đến SVG 1.1. Sự chỉ rõ

3.3 Đặt hàng kết xuất

Các phần tử trong một đoạn tài liệu SVG có thứ tự vẽ ngầm, với các phần tử đầu tiên trong đoạn tài liệu SVG được "vẽ" trước . Các yếu tố tiếp theo được sơn lên trên các yếu tố được sơn trước đó.

Giải pháp (nhanh hơn)

Bạn nên đặt vòng tròn màu xanh lá cây làm đối tượng mới nhất được vẽ. Vì vậy, trao đổi hai yếu tố.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120"> 
   <!-- First draw the orange circle -->
   <circle fill="orange" cx="100" cy="95" r="20"/> 

   <!-- Then draw the green circle over the current canvas -->
   <circle fill="green" cx="100" cy="105" r="20"/> 
</svg>

Đây là ngã ba của jsFiddle của bạn .

Giải pháp (thay thế)

Thẻ usecó thuộc tính xlink:hrefvà giá trị id của phần tử. Hãy nhớ rằng đó có thể không phải là giải pháp tốt nhất ngay cả khi kết quả có vẻ tốt. Có một chút thời gian, ở đây liên kết của phần tử đặc tả "sử dụng" SVG 1.1 .

Mục đích:

Để tránh yêu cầu tác giả sửa đổi tài liệu được tham chiếu để thêm ID vào phần tử gốc.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120">
    <!-- First draw the green circle -->
    <circle id="one" fill="green" cx="100" cy="105" r="20" />
    
    <!-- Then draw the orange circle over the current canvas -->
    <circle id="two" fill="orange" cx="100" cy="95" r="20" />
    
    <!-- Finally draw again the green circle over the current canvas -->
    <use xlink:href="#one"/>
</svg>

Ghi chú về SVG 2

Đặc điểm kỹ thuật SVG 2 là phiên bản chính tiếp theo và vẫn hỗ trợ các tính năng trên.

3.4. Đặt hàng kết xuất

Các yếu tố trong SVG được định vị theo ba chiều. Ngoài vị trí của chúng trên trục x và y của chế độ xem SVG, các phần tử SVG cũng được định vị trên trục z. Vị trí trên trục z xác định thứ tự mà chúng được vẽ .

Dọc theo trục z, các phần tử được nhóm thành các bối cảnh xếp chồng.

3.4.1. Thiết lập bối cảnh xếp chồng trong SVG

...

Bối cảnh xếp chồng là các công cụ khái niệm được sử dụng để mô tả thứ tự các phần tử phải được vẽ chồng lên nhau khi tài liệu được hiển thị, ...

• Hỗ trợ SVG 2 Mozilla - Vẽ tranh
• Làm cách nào để biết trình duyệt của tôi có hỗ trợ svg 2.0 không
• Tôi có thể sử dụng SVG không

Như những người khác ở đây đã nói, chỉ số z được xác định theo thứ tự phần tử xuất hiện trong DOM. Nếu sắp xếp lại thủ công html của bạn không phải là một tùy chọn hoặc sẽ khó khăn, bạn có thể sử dụng D3 để sắp xếp lại các nhóm / đối tượng SVG.

Sử dụng D3 để cập nhật thứ tự DOM và chức năng Z-Index bắt chước

Cập nhật Z-Index Z-Index với D3

Ở cấp độ cơ bản nhất (và nếu bạn không sử dụng ID cho bất kỳ điều gì khác), bạn có thể sử dụng ID phần tử làm điểm thay thế cho chỉ mục z và sắp xếp lại với các ID đó. Ngoài ra, bạn có thể để cho trí tưởng tượng của mình được phát huy.

Ví dụ trong đoạn mã

var circles = d3.selectAll('circle')
var label = d3.select('svg').append('text')
    .attr('transform', 'translate(' + [5,100] + ')')

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

var setOrderBy = 'IDs';
var setOrder = d3.descending;

label.text(setOrderBy);
circles.data(zOrders[setOrderBy])
circles.sort(setOrder);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 100"> 
  <circle id="1" fill="green" cx="50" cy="40" r="20"/> 
  <circle id="2" fill="orange" cx="60" cy="50" r="18"/>
  <circle id="3" fill="red" cx="40" cy="55" r="10"/> 
  <circle id="4" fill="blue" cx="70" cy="20" r="30"/> 
  <circle id="5" fill="pink" cx="35" cy="20" r="15"/> 
</svg>

Ý tưởng cơ bản là:

1. Sử dụng D3 để chọn các phần tử SVG DOM.

   var circles = d3.selectAll('circle')

2. Tạo một số mảng chỉ số z có mối quan hệ 1: 1 với các phần tử SVG của bạn (mà bạn muốn sắp xếp lại). Mảng chỉ mục Z được sử dụng trong các ví dụ bên dưới là ID, vị trí x & y, bán kính, v.v ....

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

3. Sau đó, sử dụng D3 để liên kết các chỉ số z của bạn với lựa chọn đó.

   circles.data(zOrders[setOrderBy]);

4. Cuối cùng, gọi D3.sort để sắp xếp lại các thành phần trong DOM dựa trên dữ liệu.

   circles.sort(setOrder);

Ví dụ

• Bạn có thể xếp theo ID

• Với SVG ngoài cùng bên trái trên đầu

• Bán kính nhỏ nhất trên đầu

• Hoặc Chỉ định một mảng để áp dụng chỉ mục z cho một thứ tự cụ thể - trong mã ví dụ của tôi, mảng [3,4,1,2,5]di chuyển / sắp xếp lại vòng tròn thứ 3 (theo thứ tự HTML gốc) để đứng thứ 1 trong DOM, thứ 4 là thứ 2, thứ 1 là thứ 3 , và như thế...

Cố gắng đảo ngược #onevà #two. Hãy xem qua câu đố này: http://jsfiddle.net/hu2pk/3/

Update

Trong SVG, chỉ số z được xác định theo thứ tự phần tử xuất hiện trong tài liệu . Bạn cũng có thể xem trang này nếu bạn muốn: https://stackoverflow.com/a/482147/1932751

Bạn có thể sử dụng sử dụng .

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

Vòng tròn màu xanh lá cây xuất hiện trên đầu.
jsFiddle

Như đã thảo luận, các Svss kết xuất theo thứ tự và không tính đến chỉ số z (hiện tại). Có lẽ chỉ cần gửi phần tử cụ thể đến phần dưới cùng của phần tử mẹ để nó hiển thị lần cuối.

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

Đã làm cho tôi.

Cập nhật

Nếu bạn có một SVG lồng nhau, chứa các nhóm, bạn sẽ cần mang vật phẩm ra khỏi mã nguồn của nó.

function bringToTopofSVG(targetElement){
  let parent = targetElement.ownerSVGElement;
  parent.appendChild(targetElement);
}

Một tính năng hay của SVG là mỗi phần tử chứa vị trí của nó bất kể nhóm nào được lồng vào: +1:

Sử dụng D3:

Nếu bạn muốn chèn lại từng phần tử được chọn, theo thứ tự, là con cuối cùng của cha mẹ của nó.

selection.raise()

Không có chỉ số z cho các Svss. Nhưng svg xác định phần tử nào của bạn là vị trí cao nhất theo vị trí củaire trong DOM. Do đó, bạn có thể loại bỏ Object và đặt nó vào cuối của Svg làm cho nó trở thành phần tử "kết xuất cuối cùng". Cái đó sau đó được hiển thị "trên cùng" một cách trực quan.

Sử dụng jQuery:

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

sử dụng:

moveUp($('#myTopElement'));

Sử dụng D3.js:

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

sử dụng:

myTopElement.moveUp();

Sử dụng D3:

Nếu bạn muốn thêm phần tử theo thứ tự ngược lại để sử dụng dữ liệu:

.insert('g', ":first-child")

Thay vì .append

Thêm một yếu tố vào đầu một yếu tố nhóm

Một giải pháp khác là sử dụng div, sử dụng z Index để chứa các phần tử SVG. Tại đây: https://stackoverflow.com/a/28904640/4552494

Các giải pháp sạch, nhanh và dễ dàng được đăng kể từ ngày của câu trả lời này là không thỏa đáng. Chúng được xây dựng trên tuyên bố thiếu sót rằng các tài liệu SVG thiếu thứ tự z. Thư viện cũng không cần thiết. Một dòng mã có thể thực hiện hầu hết các hoạt động để thao tác thứ tự z của các đối tượng hoặc nhóm đối tượng có thể được yêu cầu trong quá trình phát triển ứng dụng di chuyển các đối tượng 2D xung quanh trong không gian xyz.

Thứ tự Z chắc chắn tồn tại trong các mảnh tài liệu SVG

Cái được gọi là một đoạn tài liệu SVG là một cây các phần tử có nguồn gốc từ kiểu nút SVGE bổ sung. Nút gốc của một đoạn tài liệu SVG là một SVGSVGEuity, tương ứng với thẻ <svg> HTML5 . SVGGEuity tương ứng với thẻ <g> và cho phép tổng hợp trẻ em.

Có một thuộc tính chỉ mục z trên SVGEuity như trong CSS sẽ đánh bại mô hình kết xuất SVG. Phần 3.3 và 3.4 của Khuyến nghị SV3 W3C v1.1 Phiên bản 2 cho biết rằng các đoạn tài liệu SVG (cây con từ một SVGSVGEuity) được hiển thị bằng cách sử dụng tìm kiếm độ sâu của cây . Sơ đồ đó là thứ tự az theo mọi nghĩa của thuật ngữ.

Thứ tự Z thực sự là một phím tắt tầm nhìn máy tính để tránh sự cần thiết phải hiển thị 3D thực sự với sự phức tạp và nhu cầu tính toán của phương pháp dò tia. Phương trình tuyến tính cho chỉ số z ẩn của các phần tử trong một đoạn tài liệu SVG.

z-index = z-index_of_svg_tag + depth_first_tree_index / tree_node_qty

Điều này rất quan trọng vì nếu bạn muốn di chuyển một vòng tròn nằm dưới một hình vuông lên trên nó, bạn chỉ cần chèn hình vuông trước vòng tròn. Điều này có thể được thực hiện dễ dàng trong JavaScript.

Phương pháp hỗ trợ

Các trường hợp SVGE bổ sung có hai phương thức hỗ trợ thao tác đơn hàng z đơn giản và dễ dàng.

• cha mẹ.removeChild (con)
• cha mẹ.insertB Before (con, conRef)

Câu trả lời đúng không tạo ra sự lộn xộn

Vì thẻ SVGGE bổ sung ( thẻ <g> ) có thể được gỡ bỏ và chèn dễ dàng như SVGCircleEuity hoặc bất kỳ hình dạng nào khác, các lớp hình ảnh điển hình của các sản phẩm Adobe và các công cụ đồ họa khác có thể được thực hiện dễ dàng bằng cách sử dụng SVGGEuity. JavaScript này về cơ bản là một lệnh Move Dưới .

parent.insertBefore(parent.removeChild(gRobot), gDoorway)

Nếu lớp robot được vẽ là con của SVGGEuity gRobot nằm trước ô cửa được vẽ là con của SVGGEuity gDoorway, thì robot hiện đang ở phía sau ô cửa vì thứ tự z của ô cửa giờ là một thứ tự cộng với thứ tự z của robot.

Một Move Trên lệnh là gần như là dễ dàng.

parent.insertBefore(parent.removeChild(gRobot), gDoorway.nextSibling())

Chỉ cần nghĩ a = a và b = b để ghi nhớ điều này.

insert after = move above
insert before = move below

Rời khỏi DOM trong trạng thái phù hợp với quan điểm

Lý do câu trả lời này là chính xác vì nó tối thiểu và đầy đủ và, giống như phần bên trong của các sản phẩm Adobe hoặc các trình chỉnh sửa đồ họa được thiết kế tốt khác, để biểu diễn bên trong ở trạng thái phù hợp với chế độ xem được tạo bằng cách hiển thị.

Phương pháp thay thế nhưng có giới hạn

Một cách tiếp cận khác thường được sử dụng là sử dụng CSS z-index kết hợp với nhiều đoạn tài liệu SVG (thẻ SVG) với nền chủ yếu là trong suốt ở tất cả trừ phần dưới cùng. Một lần nữa, điều này đánh bại sự thanh lịch của mô hình kết xuất SVG, khiến việc di chuyển các vật thể lên hoặc xuống theo thứ tự z trở nên khó khăn.

GHI CHÚ:

1. ( https://www.w3.org/TR/SVG/render.html v 1.1, Phiên bản 2, ngày 16 tháng 8 năm 2011)

   3.3 Kết xuất các phần tử thứ tự trong một đoạn tài liệu SVG có thứ tự vẽ ngầm, với các phần tử đầu tiên trong đoạn tài liệu SVG được "vẽ" trước. Các yếu tố tiếp theo được sơn lên trên các yếu tố được sơn trước đó.

   3.4 Cách các nhóm được kết xuất Nhóm các phần tử, chẳng hạn như phần tử 'g' (xem các phần tử vùng chứa) có tác dụng tạo ra một khung vẽ riêng tạm thời được khởi tạo thành màu đen trong suốt trên đó các phần tử con được vẽ. Sau khi hoàn thành nhóm, mọi hiệu ứng bộ lọc được chỉ định cho nhóm sẽ được áp dụng để tạo một khung vẽ tạm thời được sửa đổi. Canvas tạm thời được sửa đổi được kết hợp vào nền, có tính đến bất kỳ cài đặt che khuất và độ mờ nào ở cấp độ nhóm trong nhóm.

Chúng tôi đã 2019 và z-indexvẫn chưa được hỗ trợ trong SVG.

Bạn có thể thấy trên trang web hỗ trợ SVG2 trong Mozilla mà trạng thái dành cho z-index- Không được triển khai .

Bạn cũng có thể thấy trên trang web Bug 360148 "Hỗ trợ thuộc tính 'z-index' trên các yếu tố SVG" (Báo cáo: 12 năm trước).

Nhưng bạn có 3 khả năng trong SVG để thiết lập nó:

1. Với element.appendChild(aChild);
2. Với parentNode.insertBefore(newNode, referenceNode);
3. Với targetElement.insertAdjacentElement(positionStr, newElement);(Không hỗ trợ trong IE cho SVG)

Ví dụ demo tương tác

Với tất cả 3 chức năng này.

var state = 0,
    index = 100;

document.onclick = function(e)
{
    if(e.target.getAttribute('class') == 'clickable')
    {
        var parent = e.target.parentNode;

        if(state == 0)
            parent.appendChild(e.target);
        else if(state == 1)
            parent.insertBefore(e.target, null); //null - adds it on the end
        else if(state == 2)
            parent.insertAdjacentElement('beforeend', e.target);
        else
            e.target.style.zIndex = index++;
    }
};

if(!document.querySelector('svg').insertAdjacentElement)
{
    var label = document.querySelectorAll('label')[2];
    label.setAttribute('disabled','disabled');
    label.style.color = '#aaa';
    label.style.background = '#eee';
    label.style.cursor = 'not-allowed';
    label.title = 'This function is not supported in SVG for your browser.';
}

label{background:#cef;padding:5px;cursor:pointer}
.clickable{cursor:pointer}

With: 
<label><input type="radio" name="check" onclick="state=0" checked/>appendChild()</label>
<label><input type="radio" name="check" onclick="state=1"/>insertBefore()</label><br><br>
<label><input type="radio" name="check" onclick="state=2"/>insertAdjacentElement()</label>
<label><input type="radio" name="check" onclick="state=3"/>Try it with z-index</label>
<br>
<svg width="150" height="150" viewBox="0 0 150 150">
    <g stroke="none">
        <rect id="i1" class="clickable" x="10" y="10" width="50" height="50" fill="#80f"/>
        <rect id="i2" class="clickable" x="40" y="40" width="50" height="50" fill="#8f0"/>
        <rect id="i3" class="clickable" x="70" y="70" width="50" height="50" fill="#08f"/>
    </g>
</svg>

Đẩy phần tử SVG đến cuối cùng, để chỉ số z của nó sẽ ở trên cùng. Trong SVG, không có thuộc tính nào được gọi là z-index. thử bên dưới javascript để đưa yếu tố lên hàng đầu.

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

Mục tiêu: Là một yếu tố mà chúng tôi cần đưa nó lên top Svg: Là nơi chứa các yếu tố

thật dễ dàng để làm điều đó:

1. nhân bản các mặt hàng của bạn
2. sắp xếp các mục nhân bản
3. thay thế các mục bằng cách nhân bản

function rebuildElementsOrder( selector, orderAttr, sortFnCallback ) {
	let $items = $(selector);
	let $cloned = $items.clone();
	
	$cloned.sort(sortFnCallback != null ? sortFnCallback : function(a,b) {
  		let i0 = a.getAttribute(orderAttr)?parseInt(a.getAttribute(orderAttr)):0,
  		    i1 = b.getAttribute(orderAttr)?parseInt(b.getAttribute(orderAttr)):0;
  		return i0 > i1?1:-1;
	});

        $items.each(function(i, e){
            e.replaceWith($cloned[i]);
	})
}

$('use[order]').click(function() {
    rebuildElementsOrder('use[order]', 'order');

    /* you can use z-index property for inline css declaration
    ** getComputedStyle always return "auto" in both Internal and External CSS decl [tested in chrome]
    
    rebuildElementsOrder( 'use[order]', null, function(a, b) {
        let i0 = a.style.zIndex?parseInt(a.style.zIndex):0,
  		    i1 = b.style.zIndex?parseInt(b.style.zIndex):0;
  		return i0 > i1?1:-1;
    });
    */
});

use[order] {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="keybContainer" viewBox="0 0 150 150" xml:space="preserve">
<defs>
    <symbol id="sym-cr" preserveAspectRatio="xMidYMid meet" viewBox="0 0 60 60">
        <circle cx="30" cy="30" r="30" />
        <text x="30" y="30" text-anchor="middle" font-size="0.45em" fill="white">
            <tspan dy="0.2em">Click to reorder</tspan>
        </text>
    </symbol>
</defs>
    <use order="1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="0" y="0" width="60" height="60" style="fill: #ff9700; z-index: 1;"></use>
    <use order="4" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="50" y="20" width="50" height="50" style="fill: #0D47A1; z-index: 4;"></use>
    <use order="5" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="15" y="30" width="50" height="40" style="fill: #9E9E9E; z-index: 5;"></use>
    <use order="3" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="25" y="30" width="80" height="80" style="fill: #D1E163; z-index: 3;"></use>
    <use order="2" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="30" y="0" width="50" height="70" style="fill: #00BCD4; z-index: 2;"></use>
    <use order="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="5" y="5" width="100" height="100" style="fill: #E91E63; z-index: 0;"></use>
</svg>