css - 最新 Safari 中的 SVG 过滤器

Question

所以我得到了这个很棒的 svg 过滤器，我可以将它应用于 dom 元素，并创建一个“贴纸”效果。在 Chrome 中运行良好，在 Safari 中没有骰子。具有相同问题的先前问题可追溯到 2010 年，并且似乎已在 safari 6 中得到修复。不幸的是，我找不到关于该主题的任何资源，而且我什至很难确定问题可能从哪里开始。

我已经在这个 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

(答案移至我的常规帐户)

在 Safari 中，您的过滤器必须在文档中比使用它们的地方更早定义。将 svg 片段移动到您的 HTML 上方(甚至给它零维)，一切都很好。

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