¿No funciona z-index en SVG? Corrige el orden de los trazados

Si un trazado SVG sigue detrás de otra figura después de aumentar su z-index de CSS, inspecciona el orden de los elementos del SVG. En el orden habitual de dibujo SVG, la figura anterior se pinta primero y las posteriores la cubren. Para traer un trazado al frente, colócalo después de las figuras que debe cubrir. El modelo de renderizado SVG define ese orden.

Primero determina dónde se produce el solapamiento. Un SVG completo situado detrás de una cabecera de página es un problema de disposición HTML; dos figuras dentro del mismo SVG son un problema del orden del dibujo. La solución siguiente aborda el segundo caso.

Observa la diferencia en un mismo emblema

Dibujamos un emblema original de tres piezas: una estrella naranja, un disco azul y una cinta verde. En el panel izquierdo, la estrella aparece primero en el SVG y tiene position: relative y z-index: 999 en CSS. El navegador calcula ese valor de z-index, pero el disco y la cinta posteriores siguen cubriendo la estrella. En el panel derecho solo cambia el orden de los elementos: la misma estrella aparece al final y queda delante.

La prueba usó HeadlessChrome 141 con una captura de 1200 × 680. El orden de hijos indicado fue estrella, disco, cinta a la izquierda y disco, cinta, estrella a la derecha. Es una prueba limitada de hijos SVG normales que se solapan, no una promesa sobre todos los motores de renderizado, grupos anidados o efectos.

Corrige el orden en el archivo SVG

Abre la fuente SVG en un editor de texto o inspecciona sus objetos en un editor vectorial. Busca las figuras que se solapan y léelas de arriba abajo en el archivo. Los elementos hermanos anteriores se pintan primero. Mueve el objeto que deba aparecer delante después de los objetos que debe cubrir y guarda una copia.

Por ejemplo, este dibujo simplificado coloca la estrella al final:

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

No necesitas cambiar los datos del trazado ni los colores de relleno para esta corrección. Si una aplicación de diseño tiene el comando Traer al frente, exporta después el SVG e inspecciona el código guardado o vuelve a abrirlo. El panel de capas visible del editor ayuda, pero el archivo entregado es lo que lee el siguiente motor de renderizado.

En un SVG interactivo, JavaScript puede mover un hijo existente al final de su padre actual:

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

La referencia de appendChild de MDN confirma que añadir un nodo existente lo mueve en lugar de crear una segunda copia. Usa esto solo cuando cambiar el DOM forme parte de la aplicación. Un archivo de logotipo estático suele ser más claro si estableces el orden previsto en el propio SVG.

Comprueba grupos, huecos y otros tipos de orden

Si la estrella pertenece a un grupo, moverla al final dentro de ese grupo puede seguir dejando todo el grupo detrás de otro grupo hermano posterior. Inspecciona la estructura de padres. Mueve el grupo correspondiente cuando todo el dibujo agrupado deba pasar delante; reordena sus hijos cuando solo se solapen partes dentro de ese grupo. Ten cuidado al sacar un hijo de su grupo: el grupo puede aportar transformaciones, recorte, opacidad o una máscara. La sección de grupos del modelo de renderizado SVG explica por qué el contenido agrupado se renderiza junto.

Corregir el orden de objetos tampoco repara un agujero o hueco real en la geometría del trazado. Si se rellena el centro de una letra o un emblema al exportar, inspecciona las figuras y el archivo de destino. Puede que un objeto opaco posterior simplemente esté cubriendo la abertura. La guía de huecos SVG ayuda a distinguir ese caso de problemas de reglas de relleno o contornos. Si aparece una línea blanca fina entre figuras adyacentes, usa el diagnóstico de huecos antes de cambiar el apilamiento.

Por último, paint-order es una configuración distinta. Cambia cuándo se pintan el relleno, el trazo y los marcadores de un elemento; no coloca ese elemento sobre un trazado vecino. La referencia de paint-order de MDN define ese alcance. Usa la guía de paint-order cuando un borde grueso oculte su propio relleno, en vez de cuando una pieza de color de un logotipo oculte otra.

El z-index de CSS sigue siendo relevante para las cajas HTML posicionadas y los elementos flex o grid, como documenta MDN. Distingue ese caso de disposición de página del orden de trazados guardado dentro del SVG.

Cómo se aplica con PerfectVector

Usa un maestro SVG existente si lo tienes. Volver a vectorizarlo crearía un conjunto nuevo de figuras sin resolver la decisión de capas. Si la única fuente es un logotipo PNG o JPG aplanado, PerfectVector puede ayudar antes en el proceso: convierte la imagen en un SVG candidato e inspecciona las piezas separadas y su solapamiento en un editor. Coloca los trazados recuperados en el orden previsto antes de entregar. La conversión no asigna los objetos de primer plano de tu diseño ni garantiza que una abertura pequeña sobreviva al trazado.

Si la imagen fuente tiene desenfoque, sombras o letras diminutas, redibujar manualmente esos detalles puede ser más fiable que trazarlos. La guía general de edición SVG cubre la limpieza de trazados después de la conversión.

Verifica el archivo que vas a entregar

1. Guarda una copia del SVG fuente y reordena solo el objeto o grupo previsto.
2. Abre el archivo guardado en un navegador al tamaño donde importe el solapamiento. Compáralo con el diseño fuente.
3. Vuelve a abrirlo en el editor o aplicación de destino. Comprueba el mismo solapamiento, además de máscaras, áreas recortadas y huecos.
4. Si el SVG es interactivo, prueba el comportamiento del puntero y al pasar sobre él después de reordenarlo. Una figura que ahora está encima puede recibir la interacción que antes recibía otra.
5. Si el resultado solo se ve mal a un zoom o tamaño de exportación, inspecciona si hay juntas de muestreo o huecos reales antes de mover más objetos.

Para una fuente exclusivamente rasterizada, crea un SVG candidato con PerfectVector e inspecciona su orden de trazados, aberturas y renderizado guardado al tamaño previsto. Si el archivo ya contiene las figuras vectoriales correctas, empieza por reordenarlo.

Preguntas frecuentes

¿Puedo usar z-index de CSS para traer un trazado SVG al frente? Para figuras hermanas normales dentro de un SVG, coloca el trazado después en el orden del documento SVG. Un z-index de CSS que afecta a las cajas de página circundantes no reordena de forma fiable esas figuras hijas.

¿Paint-order cambia qué objeto SVG queda encima? No. Paint-order cambia la secuencia de relleno, trazo y marcadores dentro de una figura o elemento de texto. Reordena los objetos separados para cambiar cuál cubre a otro.

¿Por qué sigue oculto un trazado después de colocarlo al final de su grupo? Puede que todo su grupo esté detrás de otro grupo. Inspecciona los grupos padres y sus transformaciones, recortes, máscaras u opacidad antes de sacar el hijo de su grupo.

Fuentes

1. W3C — Modelo de renderizado SVG 1.1 — Define el orden de pintado de los elementos de un documento SVG.
2. MDN — Node.appendChild() — Documenta cómo se mueve un hijo existente del DOM al añadirlo al final.
3. MDN — Atributo paint-order de SVG — Limita paint-order al relleno, trazo y marcadores de una figura.
4. MDN — Propiedad z-index de CSS — Explica z-index para elementos posicionados y de disposición en el apilamiento de página.
5. W3C — Modelo de renderizado SVG 2 — Describe los contextos de apilamiento SVG, la agrupación y la selección del destino del puntero.