z-index SVG não funciona? Corrija a ordem dos traçados

Se um traçado SVG permanecer atrás de outra forma após aumentar seu z-index CSS, inspecione a ordem dos elementos no SVG. Na ordem usual de desenho SVG, a forma anterior é pintada primeiro, e as formas posteriores a cobrem. Para trazer um traçado para a frente, coloque-o depois das formas que ele deve cobrir. O modelo de renderização SVG define essa ordem.

Primeiro determine onde a sobreposição ocorre. Um SVG inteiro atrás de um cabeçalho de página é um problema de layout HTML; duas formas dentro do mesmo SVG são um problema de ordem da arte. A correção abaixo aborda o segundo caso.

Veja a diferença em um emblema

Desenhamos um emblema original de três partes: uma estrela laranja, um disco azul e uma faixa verde. No painel esquerdo, a estrela vem primeiro no SVG e tem CSS position: relative e z-index: 999. O navegador calcula esse valor z-index, mas o disco e a faixa posteriores ainda cobrem a estrela. No painel direito, apenas a ordem dos elementos muda: a mesma estrela fica por último e aparece na frente.

O teste usou HeadlessChrome 141 com uma captura de tela de 1200 × 680. A ordem dos filhos informada foi estrela, disco, faixa à esquerda e disco, faixa, estrela à direita. Este é um teste restrito de filhos SVG comuns sobrepostos, não uma promessa sobre todos os renderizadores, grupos aninhados ou efeitos.

Corrija a ordem no arquivo SVG

Abra a origem SVG em um editor de texto ou inspecione seus objetos em um editor vetorial. Encontre as formas sobrepostas e leia-as de cima para baixo no arquivo. Elementos irmãos anteriores são pintados primeiro. Mova o objeto que precisa aparecer na frente para depois dos objetos que deve cobrir e salve uma cópia.

Por exemplo, este desenho simplificado coloca a estrela por último:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 160">
  <circle cx="120" cy="80" r="55" fill="#4f86df"/>
  <path d="M20 90 Q110 60 220 100 L220 125 Q110 85 20 115Z"
        fill="#22a79a"/>
  <path id="star" d="M120 20 L135 60 175 62 145 88 155 130
           120 108 85 130 95 88 65 62 105 60Z"
        fill="#ff8c64"/>
</svg>

Os dados dos traçados e as cores de preenchimento não precisam mudar para essa correção. Se um aplicativo de design tiver um comando Bring to Front, exporte o SVG depois e inspecione a marcação salva ou reabra-o. O painel visual de camadas do editor é útil, mas o arquivo entregue é o que o próximo renderizador lê.

Para um SVG interativo, JavaScript pode mover um filho existente para o fim de seu pai atual:

const star = document.querySelector("#star");
star.parentNode.appendChild(star);

A referência de appendChild do MDN confirma que anexar um nó existente o move em vez de criar uma segunda cópia. Use isso apenas quando mudar o DOM fizer parte da aplicação. Um arquivo de logo estático geralmente fica mais claro se você colocar a ordem pretendida no próprio SVG.

Confira grupos, aberturas e outros tipos de ordem

Se a estrela pertence a um grupo, movê-la para o fim dentro desse grupo ainda pode deixar o grupo inteiro atrás de um grupo irmão posterior. Inspecione a estrutura dos pais. Mova o grupo relevante quando toda a arte agrupada precisar vir para a frente; reordene seus filhos quando apenas partes dentro desse grupo se sobrepuserem. Tenha cuidado ao mover um filho para fora do grupo: o grupo pode carregar transformações, recorte, opacidade ou uma máscara. A seção de grupos do modelo de renderização SVG explica por que conteúdo agrupado é renderizado junto.

Uma correção de ordem de objetos também não repara uma abertura ou um espaço real na geometria do traçado. Se o centro de uma letra ou emblema ficar preenchido após a exportação, inspecione as formas e o arquivo de destino. Um objeto opaco posterior pode apenas estar cobrindo a abertura. O guia de aberturas SVG ajuda a separar esse caso de problemas de regra de preenchimento ou contorno. Se uma linha branca fina aparecer entre formas adjacentes, use o diagnóstico de espaços antes de mudar o empilhamento.

Por fim, paint-order é uma configuração diferente. Ela muda quando o preenchimento, o contorno e os marcadores de um elemento são pintados; não coloca esse elemento acima de um traçado vizinho. A referência de paint-order do MDN define esse escopo. Use o guia de paint-order quando um contorno grosso esconder seu próprio preenchimento, em vez de quando uma peça colorida de um logo esconder outra.

O z-index CSS ainda importa para caixas HTML posicionadas e itens flex ou grid, como documenta o MDN. Mantenha esse caso de layout de página separado da ordem dos traçados armazenada dentro do SVG.

Como isso funciona com o PerfectVector

Use um original SVG existente se você tiver um. Vetorizá-lo novamente introduziria um novo conjunto de formas sem resolver a decisão de camadas. Se a única origem for um logo PNG ou JPG achatado, o PerfectVector pode ajudar antes no fluxo: transforme a imagem em um candidato SVG e inspecione as peças separadas e suas sobreposições em um editor. Mova os traçados recuperados para a ordem pretendida antes da entrega. A conversão não determina quais objetos ficam no primeiro plano do design nem garante que uma pequena abertura sobreviva ao traçado.

Quando a imagem de origem tiver desfoque, sombras ou letras muito pequenas, um redesenho manual desses detalhes pode ser mais confiável do que a vetorização por traçado. O guia geral de edição SVG aborda a limpeza de traçados após a conversão.

Verifique o arquivo que será entregue

1. Salve uma cópia da origem SVG e reordene apenas o objeto ou grupo pretendido.
2. Abra o arquivo salvo em um navegador no tamanho em que a sobreposição importa. Compare-o com o design de origem.
3. Reabra-o no editor ou aplicativo de destino. Confira a mesma sobreposição, além de máscaras, áreas recortadas e aberturas.
4. Se o SVG for interativo, teste o comportamento de ponteiro e hover após reordenar. Uma forma agora no topo pode receber interação onde outra recebia antes.
5. Se o resultado parecer errado apenas em um zoom ou tamanho de exportação, inspecione emendas de amostragem ou espaços reais antes de mover mais objetos.

Para uma origem apenas raster, crie um candidato SVG com o PerfectVector e inspecione sua ordem de traçados, aberturas e renderização salva no tamanho pretendido. Se o arquivo já contiver as formas vetoriais certas, comece pela reordenação.

Perguntas frequentes

Posso usar z-index CSS para trazer um traçado SVG para a frente? Para formas irmãs comuns dentro de um SVG, mova o traçado para depois na ordem do documento SVG. Um z-index CSS que afeta as caixas da página ao redor não reordena essas formas filhas de modo confiável.

paint-order muda qual objeto SVG está no topo? Não. Paint-order muda a sequência de preenchimento, contorno e marcadores dentro de uma forma ou elemento de texto. Reordene objetos separados para mudar qual cobre o outro.

Por que um traçado continua oculto após eu movê-lo para o fim do grupo? Seu grupo inteiro pode estar atrás de outro grupo. Inspecione os grupos pais e as transformações, os recortes, as máscaras ou a opacidade antes de mover o filho para fora do grupo.

Fontes

1. W3C — Modelo de renderização SVG 1.1 — Define a ordem de pintura dos elementos em um documento SVG.
2. MDN — Node.appendChild() — Documenta como um filho DOM existente se move quando é anexado.
3. MDN — Atributo SVG paint-order — Limita paint-order ao preenchimento, contorno e marcadores de uma forma.
4. MDN — Propriedade CSS z-index — Explica z-index para itens posicionados e de layout no empilhamento da página.
5. W3C — Modelo de renderização SVG 2 — Descreve contextos de empilhamento SVG, agrupamento e direcionamento do ponteiro.