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

【问题标题】：SVG filter makes element invisible in Safari and mobile ChromeSVG 过滤器使元素在 Safari 和移动 Chrome 中不可见
【发布时间】：2023-03-02 21:57:01
【问题描述】：

我有以下 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

【问题讨论】：

标签： css svg svg-filters

【解决方案1】：

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

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

【讨论】：