С помощью JavaScript я могу изменить индекс Z / слой элемента SVG?

альтернативой перемещению элементов в дереве является использование <use> элементы, где вы меняете xlink:href атрибут, так что он дает вам Z заказ вы хотите.

здесь старые нити на svg-developers mailinglist обсуждается эта тема в контексте желания анимировать некоторые фигуры.

обновление:

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

в этом примере элемент является последним, что делает его самым передним элементом. Мы можем выбрать любой из других элементов, чтобы действовать в качестве переднего просто изменив . В приведенном выше примере мы выбрали круг с 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

Я думал, что он собирается бросить en error или что-то в этом роде.

appendChild = = заменить себя == перерисовать

другое решение, не упомянутое, состоит в том, чтобы поместить каждый элемент svg/набор элементов в div. Вы можете легко изменить Z-индекс divs.

Скрипка: циклы элементов SVG с Z-индексом для контейнеров

...Нажмите на кнопки, чтобы "нажать" этот элемент спереди. (против перекраски всего набора и выталкивания 1 элемента вперед, но сохраняя первоначальный порядок, как в принятом решении)

было бы очень приятно иметь относительный z индексы...

stackOverflow хочет, чтобы я поставил код, если это ссылка из jsfiddle?...УК

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>

Если вы используете svg.библиотека js, вы можете использовать ".front () " команда для перемещения любого элемента в верхнюю часть.

да порядок-это то, что указывает, какой объект будет перед другим. Чтобы манипулировать порядком, вам нужно будет перемещать вещи о DOM. Есть хороший пример этого на SVG wiki в https://www.w3.org/TR/SVG/render.html#RenderingOrder

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 по своему усмотрению.

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

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