Question

我正在使用面具从我的SVG形状中切出一个圆圈。我正在寻找具有羽毛边缘的聚光灯效果，所以我在Firefox和Chrome中使用高斯模糊滤镜来实现这一点，但由于某种原因我无法让Safari渲染滤镜。这可能与掩码定义中的形状有关吗？我读过Webkit过去需要设置一个标志来启用SVG过滤器。可能是吗？

以下是过滤器定义：

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

以下是实施它的SVG：

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

我已经尝试在同一个SVG中定义过滤器，更改过滤器单元等。这是一个链接，可以看到它。在Chrome / Firefox中试用，然后在Safari中试用：soundandtheshadow.com

更新

在Safari中搜索SVG过滤器的其他应用程序时，我注意到没有过滤器正在渲染。显然这是我的Safari版本的一个错误，我通过浏览器提交了一个错误报告。如果有人对如何更多关注此问题有更好的建议，请告诉我。如果有人有解决方法，我会保持问题公开！

Answer 1

这不是错误。在当前版本的Safari中，SVG过滤器没有实现（或者，它是在Webkit中没有过滤器支持的情况下构建的）。

此表可能对您有用：http://caniuse.com/svg-filters

UPD ：在获得答案的那一刻，Safari 6（支持SVG过滤器）已经停止了一段时间。

SVG过滤器无法渲染Safari中的蒙版形状

更新

1 个答案: