Question

所以我有这个伟大的svg过滤器，我可以应用于dom元素，并创建一个＆＃39;贴纸＆＃39;影响。适用于Chrome，在Safari中没有任何骰子。以前有相同问题的问题可以追溯到2010年，并且似乎已经在safari 6中得到修复。遗憾的是，我无法找到关于该主题的任何资源，并且很难确定问题可能从何处开始。< / p>

我在这个JSfiddle

中附加了工作代码（inChrome）

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

任何提示都会有很大帮助！

Answer 1

（对不起..我最初是因为登录问题而从临时帐户中回答了这个问题 - 所以请在我的常规帐户中为后代重新发送以下答案）

Answer 2

（答案转到我的常规帐户）

在Safari中，您的过滤器必须在文档的前面定义，而不是在使用它们的位置。将svg片段移到你的HTML上方（甚至给它零维度），这一切都很有效。

（顺便说一句，AFAIK当CSS过滤器引用SVG过滤器时，它们忽略了在它们中声明的过滤区域 - 所以你可以去除它们）

最新Safari中的SVG过滤器

2 个答案: