开发者

SVG Filter on masking shape in Safari not rendering

I'm using a mask to cut out a circle f开发者_开发技巧rom 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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜