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

【问题标题】：SVG Filter inset shadow not working in SafariSVG过滤器插入阴影在Safari中不起作用
【发布时间】：2018-08-14 06:51:39
【问题描述】：

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

【解决方案1】：

Safari 不支持通过 CSS 过滤器使用某些 SVG 过滤器原语。 feComposite/out 就是其中之一。

【讨论】：

唯一合适的解决方法是完全使用内联 SVG。我认为我有一个使用 feComponentTransfer 的巧妙解决方法，但 Safari 也不支持在 CSS 过滤器中进行不透明度操作。