Sombra paralela de SVG usando css3

¿Es posible establecer sombra paralela para un elemento svg usando css3, algo así como

box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; 

Vi algunos comentarios sobre la creación de sombras utilizando efectos de filtro. ¿Hay algún ejemplo de usar css solo? A continuación se muestra un código de trabajo donde el estilo de cusor se aplica correctamente, pero no tiene efecto de sombra. Por favor, ayúdame a obtener el efecto de sombra con un mínimo de código.

     svg .shadow { cursor:crosshair; -moz-box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; box-shadow: -5px -5px 5px #888; }          

Aquí hay un ejemplo de aplicar dropshadow a algunos svg usando la propiedad ‘filtro’. Si desea controlar la opacidad de la sombra de gotas, eche un vistazo a este ejemplo . El atributo de slope controla la cantidad de opacidad para dar a la sombra de gotas.

Pedazos relevantes del ejemplo:

                  

Box-shadow se define para trabajar en cajas de CSS (léase: rectangularjs), mientras que svg es un poco más expresivo que solo rectangularjs. Lea el manual SVG para aprender un poco más sobre lo que puede hacer con los filtros SVG.

Use la nueva propiedad de filter CSS.

Compatible con los navegadores webkit , Firefox 34+ y Edge .

Puede utilizar este polyfill que admitirá FF <34, IE6 +.

Lo usarías así:

 .shadow { /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */ -webkit-filter: drop-shadow( -5px -5px 5px #000 ); filter: drop-shadow( -5px -5px 5px #000 ); } 

Y tu html sería:

      

Este enfoque difiere del efecto de box-shadow en que tiene en cuenta la opacidad y no aplica el efecto de sombreado al cuadro, sino a las esquinas del elemento svg.

Puedes ver un ejemplo en vivo aquí .

Tenga en cuenta : este enfoque solo funciona cuando la clase se coloca solo en el elemento . NO puede usar esto en un elemento svg en línea como .

   

Lea más acerca de los filtros css en html5rocks .

Entonces, como se mencionó en los comentarios enterrados de la respuesta aceptada por Lorenzo Polidori, la opción más fácil que funciona para mí en Chrome (y estoy seguro de que otros navegadores Webkit) es:

 -webkit-svg-shadow: 0 0 7px #53BE12; 

No estoy al tanto de una solución solo de CSS.

Como mencionaste, los filtros son el enfoque canónico para crear efectos de sombra en SVG. La especificación SVG incluye un ejemplo de esto: http://www.w3.org/TR/SVG/filters.html#AnExample

La forma más fácil que he encontrado es con feDropShadow . Nunca volveré a usar esos nombres de etiqueta de filtro increíblemente esotéricos que no entiendo.