CSS shadow on SVG shape only, not entire document - css

Question

Is it possible to get CSS shadow on the SVG shape only, not entire document? Ie. around the blue arrow at:
a:after {
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, .50);
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
content:"";
position: absolute;
background-image: url(http://www.domblogger.net/buttons/play.svg);
background-repeat: no-repeat;
background-position: 0;
height: 350px;
width: 350px;
}
Play

Answer 1

Yes it is possible but you will have to apply a filter on the original svg element(use), not through CSS.
Change the file at http://www.domblogger.net/buttons/play.svg to:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" version="1.1">
<defs>
<polygon id="play" fill="rgb(0,0,200)" fill-opacity="0.6" points="0,0 0,350 300,175" />
<filter id="d" width="120%" height="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="5" />
<feOffset dx="5" dy="5" result="offsetblur" />
<feComponentTransfer>
<feFuncA type="linear" slope="0.5" />
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g>
<use filter="url(#d)" x="55" y="25" xlink:href="#play" />
</g>
</svg>

Answer 2

If you mean that you want the dropshadow only on the arrow shape, then don't set the background color to white (first line of your a:after stylerule).
a:after {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
content:"";
position: absolute;
background-image: url(http://www.domblogger.net/buttons/play.svg);
background-repeat: no-repeat;
background-position: 0;
height: 350px;
width: 350px;
}
Play