SVG过滤器在Safari中的掩蔽形状上不渲染答案

【问题标题】：SVG Filter on masking shape in Safari not renderingSVG过滤器在Safari中的掩蔽形状上不渲染
【发布时间】：2011-11-06 04:12:08
【问题描述】：

我正在使用蒙版从我的 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 版本的错误，我通过浏览器提交了错误报告。如果有人对如何让这个问题得到更多关注有更好的建议，请告诉我。如果有人有解决方法，我会保持开放状态！

【问题讨论】：

标签： safari svg svg-filters

【解决方案1】：

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

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

UPD：在给出答案的那一刻，Safari 6（支持 SVG 过滤器）已经发布了一段时间。

【讨论】：