SVG drop shadow using css3

Question

Is it possible to set drop shadow for an svg element using css3 , something like

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


        

Answer 1

Black text with white shadow

Another way, I used for white shadow (on text): create a clone for shadow:

Note: This require xmlns:xlink="http://www.w3.org/1999/xlink" at SVG declaration.

Real text value is located in section, with position and style, but without a fill definition.

The text is cloned two times: first for shadow and second for the text itself.

More distant shadow with biggest value as blur deviation:

You can use this same approach with regular SVG objects.

With same requirement: No fill definition at section!