SVG 滤镜内嵌阴影在 Safari 中不起作用

Question

您好，我正在尝试将此 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>

问题出在哪里？

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

铬结果

野生动物园结果

Answer 1

当通过

CSS 滤镜使用某些 SVG 滤镜原语时，Safari 不支持这些原语。 feComposite/out就是其中之一。