SVG 过滤器中的大模糊在 Safari 中不起作用答案

【问题标题】：Large Blurs in SVG Filters not working in SafariSVG 过滤器中的大模糊在 Safari 中不起作用
【发布时间】：2018-07-27 23:02:01
【问题描述】：

一段时间以来，我一直在使用以下 SVG 过滤器代替 filter: blur(#px);，因为我需要一个覆盖元素边到边的模糊，而不是通常的衰减。它在桌面版和安卓版的 Chrome 中运行良好。

另一方面，Safari webkit 存在各种问题。我已经尝试删除和调整feColorMatrix 和feComposite，但结果变得更糟。

我已经四处寻找替代品，但我已经完全干了。

<filter id="ultraBlur" width="150%" height="150%" x="-25%" y="-25%" color-interpolation-filters="sRGB">
    <feGaussianBlur stdDeviation="70"></feGaussianBlur>
    <feColorMatrix type="matrix" values="1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 9 0"></feColorMatrix>
    <feComposite in2="SourceGraphic" operator="in"></feComposite>
</filter>

由 chrome 渲染

由 safari webkit 呈现

【问题讨论】：

标签： css svg svg-filters

【解决方案1】：

您遇到了 webkit 内存管理启发式方法。从实验 - 单次中的最大模糊大小是我的示例图像上的 stdDeviation 45 - 大于这个并且 webkit 缩小图像（以节省内存 - 这是一个巨大的模糊）。

好的 - 你有两个选择。

通过向过滤器元素添加“filterRes="1200" 来强制 webkit 不缩小图像。
将模糊分成两步以获得相同的效果。

我推荐策略 #2 - 因为 filterRes 现在已弃用，并且仅适用于 iOS/Safari（因为 Apple 没有跟上最新的 SVG 内容。）以下在 iOS/Safari 中运行良好

<svg width="800px" height="600px">
  <defs>
  <filter id="ultraBlur" width="150%" height="150%" x="-25%" y="-25%" color-interpolation-filters="sRGB">
    <feGaussianBlur stdDeviation="45"/>
    <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 0 0 0 10 0"/>
    <feGaussianBlur stdDeviation="45"/>
     <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 0 0 0 10 0"/>
    <feComposite in2="SourceGraphic" operator="in"></feComposite>
</filter>
  </defs>
  <image filter="url(#ultraBlur)" x="0" y="0" width="700" height="400" xlink:href="https://upload.wikimedia.org/wikipedia/commons/5/5b/Paris-sunset-panoramic.jpg" preserveAspectRatio="xMidYMid slice"/>
</svg>

【讨论】：