最新 Safari 中的 SVG 过滤器答案

【问题标题】：SVG Filters in Latest Safari最新 Safari 中的 SVG 过滤器
【发布时间】：2017-02-06 23:38:58
【问题描述】：

所以我有了这个很棒的 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/

任何提示将不胜感激！

【问题讨论】：

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

标签： css google-chrome svg filter safari

【解决方案1】：

（抱歉 .. 由于登录问题，我最初是从临时帐户回答这个问题的 - 所以从我的常规帐户重新发布下面的答案以供后代使用）

【讨论】：

【解决方案2】：

（答案已移至我的常规帐户）

在 Safari 中，您的过滤器必须在文档中比使用它们的位置更早地定义。将 svg 片段移到 HTML 上方（甚至将其设为零尺寸），一切都很好。

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

【讨论】：