最新版Safari中的SVG滤镜

Question

我有一个很棒的SVG过滤器，可以应用于DOM元素并创建“贴纸”效果。在Chrome中运行良好，在Safari中无法工作。之前遇到同样问题的问题可以追溯到2010年，并且似乎已经在Safari 6中得到解决。不幸的是，我找不到任何关于这个主题的资源，甚至很难确定问题从哪里开始。

我在这个JSfiddle中附上了（在Chrome中）工作的代码。

<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/。

- Adam Seckel

---

我刚在Safari中尝试了一下，我认为它看起来还不错！（也在Chrome中检查过） - Mike Szyndel

Answer 1

在Safari中，您的过滤器必须在使用它们的位置之前在文档中定义。将SVG片段移到HTML上方（甚至给它零尺寸），一切都可以正常工作。

（顺便说一下，据我所知，当CSS过滤器引用SVG过滤器时，它们会忽略其中声明的过滤区域 - 所以您可能可以摆脱它们）

- Michael Mullany

Answer 2

（抱歉...我最初是从临时帐户回答的，因为登录问题 - 所以现在从我的常规帐户重新发布答案以供后人参考）

- michael