最新的Safari中的SVG过滤器

Question

所以我有这个伟大的svg过滤器，我可以将其应用于dom元素，并创建一个“贴纸”效果。在Chrome中效果很好，在Safari中没有骰子。以前发生过同样问题的问题的日期与2010年相同，并且在Safari 6中似乎已得到修复。不幸的是，我无法找到有关该主题的任何资源，甚至难以确定问题的起点。

我们已经附上了工作代码（inChrome）在此的jsfiddle

<svg height="200px" width="300px" viewbox="0 0 300 200"> 
    <defs> 
     <filter id="purple-glow" x="-5000%" y="-5000%" width="10000%" height="10000%"> 
      <feFlood result="flood" flood-color="#cdcbbf" flood-opacity="1"></feFlood> 
    <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite> 
<feMorphology in="mask" result="dilated" operator="dilate" radius="5"></feMorphology> 

      <feMerge> 
       <feMergeNode in="dilated"></feMergeNode> 
       <feMergeNode in="SourceGraphic"></feMergeNode> 
      </feMerge> 
     </filter> 
    </defs>     
    </svg> 

https://jsfiddle.net/m87sogdh/9/

任何提示将不胜appreicated！

Answer 1

（抱歉..我最初回答了这个距离，因为登录问题的临时账户 - 所以从我的账户定期为后人重新张贴下面的答案）

Answer 2

（答案搬到我经常账户）

在Safari ，您的过滤器必须在文档的前面定义，而不是在使用它们的位置。将svg片段移动到HTML上方（甚至可以将其设置为零），并且这一切都很好。

（顺便说一句，据我所知在CSS滤镜引用SVG过滤器，他们忽略了他们所申报的滤光区 - 所以你也许可以摆脱他们的）