CODEWITHSUNDEEP
cssgoogle-chromesvgfiltersafari
Adam Seckel
Adam Seckel

Reputation: 33

SVG Filters in Latest Safari

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.

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!

Upvotes: 3

Views: 1770

Answers (2)

Michael Mullany
Michael Mullany

Reputation: 31790

(answer moved to my regular account)

In Safari, your filters have to be defined earlier in the document than where they're used. Move the svg fragment above your HTML (and even give it zero dimensions) and it all works great.

(btw, AFAIK when CSS filters reference SVG filters, they ignore the filter region declared in them - so you can probably get rid of them)

Upvotes: 1

michael
michael

Reputation: 41

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

Upvotes: 0

Related Questions