Transparencia

Cuando los objetos se superponen en SVG, el orden del código determina qué elemento aparecerá sobre el otro. Los elementos hermanos anteriores siempre se superponen con los elementos hermanos declarados después. La propiedad z-index de CSS no funciona en SVG. Para mover un objeto al frente, se debe modificar el árbol DOM.

Puedes ver a través de objetos superpuestos modificando su transparencia. Puedes aplicar niveles de opacidad a rellenos y trazos por separado, usando fill-opacity o stroke-opacity, o a todo el objeto usando opacity. Todos los atributos requieren un valor entre 0 (invisible) y 1 (opaco). Una alternativa, que consigue el mismo resultado, es usar el componente alfa en las cadenas de color rgba o hsla (por ejemplo, rgba(255,0,0,0.5)).

Los tres cuadrados a continuación aplican diferentes parámetros de transparencia en rellenos y trazos:

<rect x="50" y="50" height="100" width="100" rx="10" ry="10" stroke="red" stroke-width="10" fill-opacity="0"/>
<rect x="75" y="75" height="100" width="100" rx="10" ry="10" fill="gray" stroke="black" stroke-width="10" fill-opacity=".7"/>
<rect x="100" y="100" height="100" width="100" rx="10" ry="10" fill="yellow" stroke="blue" stroke-width="10" stroke-opacity=".6"/>

En el siguiente código, aparecen dos rectángulos verticales delgados detrás de un rectángulo horizontal ancho y otros dos rectángulos verticales delante de él:

<rect x="300" y="50" height="150" width="25"/>
<rect x="400" y="50" height="150" width="25" fill-opacity=".5"/>

<rect x="250" y="100" height="50" width="300" fill="red" stroke="orange" stroke-width="10" stroke-opacity=".5" />
<rect x="350" y="50" height="150" width="25" />
<rect x="450" y="50" height="150" width="25" fill-opacity=".5" />

La siguiente imagen muestra el resultado: