最新Safari中的SVG过滤器 [英] SVG Filters in Latest Safari

问题描述

所以我有一个很棒的svg过滤器，可以将其应用于dom元素，并创建贴纸"效果.在Chrome浏览器中效果很好，在Safari浏览器中没有优势.先前具有相同问题的问题的日期为2010年，并且似乎已经在safari 6中得到了修复.不幸的是，我找不到关于该主题的任何资源，并且甚至很难确定问题的出处.

So I've got this great svg filter that I can apply to a dom element, and create a 'sticker' effect. Works great in Chrome, no dice in Safari. Previous issues with the same problem are dated to 2010, and appear to have been fixed in safari 6. Unfortunately I can't find any resources on the topic, and am having a hard time even identifying where the problem could start.

我已在此JSfiddle中附加了工作代码(inChrome)

I've attached the working code (inChrome) in this 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/

任何提示都将不胜感激！

Any tips would be greatly appreicated!

推荐答案

(对不起..由于登录问题，我最初是从临时帐户回答的-因此，请在后继的常规帐户中重新张贴答案)

(sorry .. I originally answered this from a temp account because of login issues - so reposting answer below from my regular account for posterity)

这篇关于最新Safari中的SVG过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！