SVG Filters cause graphic to be chopped off [duplicate]

Question

I'm trying to add a filter to an SVG created circle, but as soon as I add any sort of filter the top and left sides of the circle are cropped. I've tried playing around with all the settings, including the x, y and width but that has fairly weird and unexpected results. Looking at examples online, it seems to be the same for them too! For instance see the W3 example here http://www.w3schools.com/svg/tryit.asp?filename=trysvg_fegaussianblur. It looks like it has worked fine, but that's because it's a square and you can't tell it's being cropped! Change it to a circle, change:

rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)"

to

path filter="url(#f1)" fill="none" stroke="#385370" d="M87,15A72,72,0,1,1,86.99,15" stroke-width="30"

And suddenly bits are being cropped. I don't think there's anything wrong with my circle? What's causing this and how come I can't find any other reports of it even though all examples do it?! See http://www.c-sharpcorner.com/UploadFile/99bb20/html5-inline-svg/ as well, their examples do it too! I'm looking on both Chrome and Firefox.

philipp philipp · Accepted Answer · 2012-09-07T08:41:17

I think you mus define the x, y, width and height. look here:

<filter
   id="filter3755"
   inkscape:label="testfilter"
   x="-0.20000000000000001"
   y="-0.20000000000000001"
   height="1.3999999999999999"
   width="1.3999999999999999">
  <feGaussianBlur
     stdDeviation="3"
     id="feGaussianBlur3757" />
</filter>

the values define the area on which the filter is applied relative to the elements' position and dimension. In the example above the filter has its origin at -0.2% of the element and is 1.4% width and high.

good luck

edit::

like mentioned in the other answer, the svg itself must also be large enough...

SVG Filters cause graphic to be chopped off [duplicate]

2 Answers