I had a problem setting the shadow for svg with a mask applied to it.
jsfiddle: http://jsfiddle.net/3kxnmhfL/

Below is the code:

.watch-video-svg { width: 50px; height: 50px; } 
 <div class="watch-video-svg"> <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" height="100%" width="100%" viewBox="0 0 100 100"> <defs> <filter id="shadow"> <feDropShadow dx="4" dy="8" stdDeviation="4"/> </filter> <mask id="cut-off-bottom"> <circle cx="50%" cy="50%" r="50%" fill="white"/> <polygon points="31,20, 31,77, 80,50" fill="black"/> <!-- <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" /> --> </mask> </defs> <circle cx="50%" cy="50%" r="50%" fill="red" mask="url(#cut-off-bottom)" filter="url(#shadow)" /> </svg> </div>

I want the shadow to appear only around the SVG circle and not contain a div.

What could be the reason why the shadow does not appear?

1 answer 1

SVG filters have a parameter - filter region .
filter region defines the region of pixels that the browser uses to store the results of the filter action. filter region default filter region is the element borders (to which the filter is applied) plus a margin around it to allow filter elements that have results to exceed the size of the original element.

However, in your case, stdDeviation equal to 4 causes the blur to expand further than 10% of the norm.

The result is a cropped blur, although the viewBox been enlarged enough to provide full blur.

To fix this, you just need to increase the size of the filter area.
A value of 20% seems to work fine.

 <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">

In addition, I simplified SVG, getting rid of unnecessary masks. I also changed the viewBox to include a portion of the blur that extends to the left.

 .watch-video-svg { width: 500px; height: 500px; background: linen; } 
 <div class="watch-video-svg"> <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="-5 0 120 120"> <defs> <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%"> <feDropShadow dx="4" dy="8" stdDeviation="4"/> </filter> </defs> <circle cx="50" cy="50" r="50" fill="red" filter=url(#shadow) /> <polygon points="31,20, 31,77, 80,50" fill="white"/> </svg> </div>