SVG过滤器插入阴影在Safari中不起作用

Posted 2021-05-02

您好我正在尝试将此svg插入阴影过滤器应用于我的div。在Chrome中工作正常但在Safari中没有。

这是svg过滤器：

<filter id="inset" primitiveUnits="objectBoundingBox" x="0%" y="0%">
  <feOffset dx="0.00" dy="0.00"></feOffset>
  <feGaussianBlur stdDeviation="0.1" result="offset-blur"></feGaussianBlur>
  <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"></feComposite>
  <feFlood flood-color="black" flood-opacity="0.8" result="color"></feFlood>
  <feComposite operator="in" in="color" in2="inverse" result="shadow"></feComposite>
  <feComposite operator="over" in="shadow" in2="SourceGraphic" result="inset-shadow"></feComposite>
  <feGaussianBlur in="SourceAlpha" stdDeviation="0.0012"></feGaussianBlur>
  <feOffset dx="0.013" dy="0.013" result="offsetblur"></feOffset>
  <feFlood flood-color="black"></feFlood>
  <feComposite in2="offsetblur" operator="in"></feComposite>
  <feMerge>
    <feMergeNode in="inset-shadow"></feMergeNode>
  </feMerge>
</filter>

哪里出了问题？

注意：我尝试应用此过滤器的子项具有剪辑路径多边形属性

Chrome result

Safari result

答案

当通过CSS过滤器使用Safari时，Safari不支持某些SVG过滤器基元。 feComposite / out就是其中之一。