Estoy desarrollando un pequeño juego en HTML en el que diferentes objetos vuelan por la pantalla proyectando una sombra en el suelo. Los dibujos son en SVG y los creo y animo usando d3.js.
El problema que tengo con esto es que cada pareja objeto-sombra está en un SVG. Entonces cuando dos objetos están cerca, la sombra de uno se proyecto sobre la del otro (cuando teóricamente en el juego estarían en el mismo plano) y es un efecto que quiero evitar.
Aquí se puede ver el problema. El avión rosado proyecta la sombra por encima del avión azul:
.avion {
width:250px;
height:250px;
position:absolute;
}
.avion .sombra {
fill:rgba(0,0,0,0.25);
stroke:rgba(0,0,0,0);
stroke-width:0;
filter:url(#blur);
}
.avion .objeto {
stroke:rgba(0,0,0,0);
stroke-width:0;
}
<svg viewBox="0 0 250 250" class="avion" style="top:50px;left:60px;">
<defs>
<filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="8" />
</filter>
</defs>
<path class="sombra" d="M 100,50 115,65 115,110 195,150 115,150 115,200 135,220 102,220 102,225 98,225 98,220 65,220 85,200 85,150 5,150 85,110 85,65Z" />
<path class="objeto" fill="#00aadd" d="M 125,0 140,15 140,60 220,100 140,100 140,150 160,170 127,170 127,175 123,175 123,170 90,170 110,150 110,100 30,100 110,60 110,15Z" />
</svg>
<svg viewBox="0 0 250 250" class="avion" style="top:10px;left:180px;">
<defs>
<filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="8" />
</filter>
</defs>
<path class="sombra" d="M 100,50 115,65 115,110 195,150 115,150 115,200 135,220 102,220 102,225 98,225 98,220 65,220 85,200 85,150 5,150 85,110 85,65Z" />
<path class="objeto" fill="#aa0066" d="M 125,0 140,15 140,60 220,100 140,100 140,150 160,170 127,170 127,175 123,175 123,170 90,170 110,150 110,100 30,100 110,60 110,15Z" />
</svg>
Lo que querría es que ambos objetos queden por encima de las sombras. ¿Hay alguna manera de hacer eso? ¿Sería mejor usar otra estrategia (p.e. canvas
) en lugar de elementos SVG? ¿O un único SVG con múltiples grupos?
Intenté aplicar estilos CSS directamente en los path
para que las sombras se pusieran en una capa inferior (z-index:1
) y los objetos en una capa superior (z-index:2
). Pero no funcionó.
Pensé en separar la sombra y el objeto en dos SVG, y tener todas las sombras en una sección con un z-index
inferior, y todos los objetos en otra sección con un z-index
superior. Esto parece sí funcionar, pero no sé si es conveniente (o eficiente) porque entonces tendría que animar el doble de elementos.