SVG过滤器中的大模糊不适用于Safari

时间:2018-02-17 00:55:03

标签: css svg svg-filters

我已经使用以下SVG过滤器代替filter: blur(#px);一段时间了,因为我需要模糊覆盖元素边缘到边缘而不是通常的下降。它在桌面和Android上的Chrome中都非常有效。

另一方面,Safari webkit与它有各种各样的问题。我已尝试删除并调整feColorMatrixfeComposite,但结果会恶化。

我一直在寻找替代品,但我已经完全干了。

<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呈现的

as rendered by chrome

由safari webkit提供的

as rendered by safari webkit

1 个答案:

答案 0 :(得分:3)

您已经遇到了webkit内存管理启发式问题。从实验中 - 单次传递中的最大模糊大小是我的样本图像上的stdDeviation 45 - 大于此并且webkit缩小图像(为了节省内存 - 这是一个巨大的模糊)。

好的 - 你有两个选择。

  1. 强制webkit不通过添加&#34; filterRes =&#34; 1200&#34;来缩小图像。过滤元素。
  2. 将模糊分成两个步骤以获得相同的效果。
  3. 我建议使用策略#2 - 因为filterRes现已弃用,仅适用于iOS / Safari(因为Apple无法跟上最新的SVG内容。)以下在iOS / Safari中运行良好

    &#13;
    &#13;
    <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>
    &#13;
    &#13;
    &#13;