За допомогою JavaScript, чи можу я змінити індекс Z / шар елемента SVG <g>?

Скажімо, у мене є пара складених фігур ( <g>). Я хочу мати можливість натискати та перетягувати їх, але хочу, щоб той, який зараз перетягується, був зверху іншого в порядку Z, так що, якщо я перетягну його над ІНШИМ, другий слід затьмарити.

Індекс Z у SVG визначається порядком відображення елементів у документі. Вам доведеться змінити порядок елементів, якщо ви хочете надати певну форму зверху.

Альтернативою рухомим елементам у дереві є використання <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"якого він відображається як найвищий елемент.

Дивіться скрипка .

Це старе питання, але ...

На 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 == замінити себе == перемалювати

Інше рішення, про яке не згадується, - це розміщення кожного елемента svg / набору елементів у div. Ви можете легко змінити z-індекс div.

Скрипка: цикли елементів SVG із z-індексом для контейнерів

... Натисніть на кнопки, щоб «штовхнути» цей елемент вперед. (проти перефарбовування цілого набору та висунення 1 елемента вперед, але збереження початкового порядку, як у прийнятому рішенні)

Було б дуже добре мати відносні z-індекси ...

stackOverflow хоче, щоб я поставив код, якщо це посилання з 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>

Так, порядок - це те, що вказує, який об’єкт буде перед іншим. Щоб маніпулювати порядком, вам потрібно буде перемістити речі про DOM. Є хороший приклад цього у вікі SVG за адресою https://www.w3.org/TR/SVG11/render.html#RenderingOrder

Якщо ви використовуєте бібліотеку svg.js , ви можете скористатися командою ".front ()" для переміщення будь-якого елемента вгору.

SVGвикористовує "художню модель" візуалізації. Фарба застосовується під час послідовних операцій до вихідного пристрою таким чином, що кожна операція зафарбовує деяку область вихідного пристрою. Коли область перекриває попередньо пофарбовану область, нова фарба частково або повністю затемнює стару. - посилання на це

У SVG, щоб отримати вищий більший індекс Z, слід перемістити елемент вниз у дереві DOM. Ви можете зробити це за допомогою jQuery, вибравши елемент SVG, видаливши його та додавши ще раз у потрібну позицію:

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

Коментар Адама Бредлі до відповіді Сема був точно таким. Він використовує jQuery, а не лише CSS, але він сказав наступне:

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

Однак для того, що я створював, мені потрібно було, щоб мій шлях SVG був вище будь-якого іншого шляху при наведенні, але все одно був нижче мого тексту SVG. Ось ось що я придумав:

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

І appendTo, і insertBefore перемістять ваш елемент у нове розташування, що дозволить вам змінювати глибину елемента SVG за бажанням.