SVG shadow cut off

Question

The SVG I\'m working with has a drop shadow via feGaussianBlur filter.

The shadow itself is displayed properly, but gets cut off on top and bottom edges.

Lik

Answer 1

You need to increase the size of the filter region.

<filter id="SVGID_0" y="-40%" height="180%">

works just fine. The silent defaults for the filter region are: x="-10%" y="-10%" width="120%" height="120%" - large blurs usually get clipped. (Your shadow isn't getting clipped horizontally because your width is about 2.5x your height - so that 10% results in a wider horizontal filter region). Also, the y filter region seems to be calculated as if the path had a zero pixel stroke, so it's ignoring the stroke width. (Different browsers have different behavior wrt whether they consider the stroke to be part of the bounding box for purposes of filter region calculation.)

(Update: Moving up observations from comments) Please note that if your particular shape is either zero width or zero height (e.g. a horizontal or vertical line), then you must specify filterUnits="userSpaceOnUse" as part of the filter declaration and explicitly specify a filter region (x,y,width height) in userSpaceUnits (usually pixels) that creates enough room to display a shadow.

Answer 2

If you're using it inside an HTML, you can simply use CSS properties to fix this issue.

svg {
  overflow: visible !important;
}

I haven't checked other browsers, but chrome has the overflow: hidden by default on svg tags.

A bit late, but I hope it's helpful.

Answer 3

Add an attribute to the filter shadow svg tag:

filterUnits="userSpaceOnUse"

Final Output:

<filter id="dropshadow" filterUnits="userSpaceOnUse" height="800" width="1600">

Which makes the shadow absolutely positioned and visible outside of its container.