As soluções limpas, rápidas e fáceis publicadas na data desta resposta são insatisfatórias. Eles são construídos sobre a afirmação falsa de que os documentos SVG não possuem ordem z. Bibliotecas também não são necessárias. Uma linha de código pode executar a maioria das operações para manipular a ordem z de objetos ou grupos de objetos que podem ser necessários no desenvolvimento de um aplicativo que move objetos 2D em um espaço xyz.
A ordem Z existe definitivamente em fragmentos de documento SVG
O que é chamado de fragmento de documento SVG é uma árvore de elementos derivados do tipo de nó base SVGElement. O nó raiz de um fragmento de documento SVG é um SVGSVGElement, que corresponde a uma tag HTML5 <svg> . O SVGGElement corresponde à tag <g> e permite agregar filhos.
Ter um atributo z-index no SVGElement como no CSS derrotaria o modelo de renderização SVG. As seções 3.3 e 3.4 da Recomendação W3C SVG v1.1 2ª Edição afirmam que fragmentos de documento SVG (árvores de descendentes de um SVGSVGElement) são renderizados usando o que é chamado de pesquisa inicial em profundidade da árvore . Esse esquema é uma ordem em todos os sentidos do termo.
A ordem Z é na verdade um atalho de visão computacional para evitar a necessidade de renderização 3D verdadeira com as complexidades e demandas computacionais do traçado de raios. A equação linear para o índice z implícito de elementos em um fragmento de documento SVG.
z-index = z-index_of_svg_tag + depth_first_tree_index / tree_node_qty
Isso é importante porque se você deseja mover um círculo que estava abaixo de um quadrado para acima dele, basta inserir o quadrado antes do círculo. Isso pode ser feito facilmente em JavaScript.
Métodos de suporte
As instâncias do SVGElement têm dois métodos que oferecem suporte à manipulação simples e fácil da ordem z.
- parent.removeChild (child)
- parent.insertBefore (child, childRef)
A resposta correta que não cria uma bagunça
Como a SVGGElement ( tag <g> ) pode ser removida e inserida tão facilmente quanto um SVGCircleElement ou qualquer outra forma, as camadas de imagem típicas dos produtos Adobe e outras ferramentas gráficas podem ser implementadas com facilidade usando o SVGGElement. Esse JavaScript é essencialmente um comando Mover para baixo .
parent.insertBefore(parent.removeChild(gRobot), gDoorway)
Se a camada de um robô desenhada como filho de SVGGElement gRobot estava antes da porta desenhada como filho de SVGGElement gDoorway, o robô agora está atrás da porta porque a ordem z da porta agora é uma mais a ordem z do robô.
Um comando Mover para cima é quase tão fácil.
parent.insertBefore(parent.removeChild(gRobot), gDoorway.nextSibling())
Basta pensar em a = aeb = b para lembrar disso.
insert after = move above
insert before = move below
Deixando o DOM em um estado consistente com a exibição
A razão pela qual essa resposta está correta é porque é mínima e completa e, como os produtos internos da Adobe ou outros editores de gráficos bem projetados, deixa a representação interna em um estado consistente com a exibição criada pela renderização.
Abordagem alternativa, mas limitada
Outra abordagem comumente usada é usar o índice z CSS em conjunto com vários fragmentos de documento SVG (tags SVG), com fundos transparentes na maioria dos casos, exceto o inferior. Novamente, isso anula a elegância do modelo de renderização SVG, dificultando a movimentação de objetos para cima ou para baixo na ordem z.
NOTAS:
- ( https://www.w3.org/TR/SVG/render.html v 1.1, 2ª edição, 16 de agosto de 2011)
3.3 Os elementos da ordem de renderização em um fragmento de documento SVG têm uma ordem implícita de desenho, com os primeiros elementos no fragmento de documento SVG sendo "pintados" primeiro. Os elementos subsequentes são pintados sobre os elementos pintados anteriormente.
3.4 Como os grupos são renderizados Elementos de agrupamento, como o elemento 'g' (consulte elementos de contêiner), produzem uma tela separada temporária, inicializada em preto transparente, na qual os elementos filhos são pintados. Após a conclusão do grupo, quaisquer efeitos de filtro especificados para o grupo são aplicados para criar uma tela temporária modificada. A tela temporária modificada é composta em segundo plano, levando em consideração as configurações de máscara e opacidade no nível do grupo.