I’m using a mask to cut out a circle from my SVG shape. I’m going for a spotlight effect with a feathered edge so I’m using a Gaussian blur filter to achieve this in Firefox and Chrome, but for some reason I cannot get Safari to render the filter. Could this have anything to do with it being a shape within a mask definition? I read that Webkit used to require a flag to be set to enable SVG filters. Could that be it?
Here’s the filter definition:
<defs>
<filter id="blur_alpha" x="-1" y="-1" width="100" height="100" filterUnits="objectBoundingBox">
<feGaussianBlur result="blur_alpha_blur" in="SourceAlpha" stdDeviation="10"/>
</filter>
</defs>
Here’s the SVG implementing it:
<svg version="1.1" width="360" height="515" viewBox="0 0 360 515">
<defs>
<mask id="circle_mask0" x="0" y="0" width="360" height="515" maskUnits="userSpaceOnUse">
<rect x="0" y="0" width="360" height="515" stroke-width="0" fill="white" opacity="0.8"/>
<circle cx="514" cy="492" r="129.6" stroke-width="0" fill="black" opacity="1" filter="url(#blur_alpha)"/>
</mask>
</defs>
<rect x="0" y="0" width="360" height="515" stroke-width="0" mask="url(#circle_mask0)" opacity="1"/>
</svg>
I’ve already tried defining the filter within the same SVG, changing the filter units, etc. Here’s a link to see it. Try it in Chrome/Firefox and then in Safari: soundandtheshadow.com
Update
Searching around for other applications of SVG filters in Safari, I noticed that no filters were rendering. Apparently this is a bug on my version of Safari, I submitted a bug report through the browser. If anyone has better advice on how to get this issue more attention, please let me know. I’ll keep the question open in case somebody has a workaround!
This is not a bug. SVG filters are just not implemented (or, rather, it is built without filter support in Webkit) in the current version of Safari.
This table might be useful to you: http://caniuse.com/svg-filters
UPD: At the moment of the answer being awarded, Safari 6 (which supports SVG filters) is out for some time.