1

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.

Baxter
  • 169
  • 4
  • 14

2 Answers2

4

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...

philipp
  • 15,947
  • 15
  • 61
  • 106
  • The defaults for the filter effects region are x="-10%" y="-10%" width="120%" height="120%" so that you don't need to set them usually. – Robert Longson Sep 07 '12 at 08:45
  • Ok, I did not know the exact value of the default, but maybe that they are too small for the given graphic. I would open the graphic with inkscape and see what is wrong, that usually works best for me. – philipp Sep 07 '12 at 08:47
  • Ok how do you guys work all this out?! I'm obviously new to this and am not getting it, these values at -0.2% are pretty precise and seemingly random to me! How do you calculate that?! Thanks for the help! – Baxter Sep 07 '12 at 09:22
  • I use Inkscape, create the graphic and read the source afterwards. But I also read some books about svg like this: http://www.amazon.com/SVG-Essentials-OReilly-XML-Eisenberg/dp/0596002238/ref=sr_1_1?ie=UTF8&qid=1347010060&sr=8-1&keywords=svg+essentials – philipp Sep 07 '12 at 09:28
1

Just give the outer <svg> element a height so it's big enough for the content. e.g. height="300". The default is 300px x 150px which is not enough for your example path.

The same thing would happen with the rect if you made it bigger e.g. height="200"

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • I've tried allsorts of widths and heights, right up to 1000. It doesn't work! I'm not getting this at all..! :( – Baxter Sep 07 '12 at 09:26