Question

我有以下SVG过滤器：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
      <filter id="blurlayer" width="110%" height="100%">

        <feGaussianBlur  stdDeviation="4" result="blur"/>


        <feImage id="feimage" xlink:href="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMTAyNCIgaGVpZ2h0PSIzMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogPGc+DQogIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4NCiAgPHJlY3QgZmlsbD0ibm9uZSIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjMwMiIgd2lkdGg9IjEwMjYiIHk9Ii0xIiB4PSItMSIvPg0KIDwvZz4NCg0KIDxnPg0KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+DQogIDxyZWN0IGlkPSJzdmdfMSIgaGVpZ2h0PSIxMzMiIHdpZHRoPSIxMDI0IiB5PSI4NC41IiB4PSIwIiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSJudWxsIiBmaWxsPSIjMDAwMDAwIi8+DQogPC9nPg0KPC9zdmc+" x="-5%" y="0"  height="300px" result="mask" />

        <feComposite in2="mask" in="blur"  operator="in" result="comp" />

        <feMerge result="merge">
          <feMergeNode in="SourceGraphic" />
          <feMergeNode in="comp" />
        </feMerge> 

      </filter>
    </defs>

</svg>

并通过CSS将其应用于元素：

.filtered {
  -webkit-filter: url(#blurlayer);
  filter: url(#blurlayer);
  z-index: 1;
}

这适用于桌面版Chrome和Firefox，但不适用于桌面/移动版Safari和移动版Chrome。我认为这可能是语法问题，但看不到它，请指教。

Codepen链接https://codepen.io/75bytes/pen/eyGKMx

Answer 1

似乎在Safari中将feImage应用于HTML元素似乎是不可能的。我最终得到了Safari和移动设备的解决方法，并使用overlay元素和CSS属性backdrop-filter和pointer-events:none将事件传递给屏蔽元素：

#backdrop {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    pointer-events: none;
}

SVG过滤器使元素在Safari和移动Chrome中不可见

1 个答案: