CODEWITHSUNDEEP
csssvgsafarisvg-filters
Jose Gutierro Felip
Jose Gutierro Felip

Reputation: 11

SVG Filter inset shadow not working in Safari

Hello I'm trying to apply this svg inset shadow filter to my div. Is working fine in Chrome but not in Safari.

Here's the svg filter:

<filter id="inset" primitiveUnits="objectBoundingBox" x="0%" y="0%">
  <feOffset dx="0.00" dy="0.00"></feOffset>
  <feGaussianBlur stdDeviation="0.1" result="offset-blur"></feGaussianBlur>
  <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"></feComposite>
  <feFlood flood-color="black" flood-opacity="0.8" result="color"></feFlood>
  <feComposite operator="in" in="color" in2="inverse" result="shadow"></feComposite>
  <feComposite operator="over" in="shadow" in2="SourceGraphic" result="inset-shadow"></feComposite>
  <feGaussianBlur in="SourceAlpha" stdDeviation="0.0012"></feGaussianBlur>
  <feOffset dx="0.013" dy="0.013" result="offsetblur"></feOffset>
  <feFlood flood-color="black"></feFlood>
  <feComposite in2="offsetblur" operator="in"></feComposite>
  <feMerge>
    <feMergeNode in="inset-shadow"></feMergeNode>
  </feMerge>
</filter>

Where's the problem?

Note: The child where I' trying to applying this filter has a clip-path polygon property

Chrome result

Safari result

Upvotes: 1

Views: 808

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31715

Safari does not support certain SVG filter primitives when they're used via a CSS filter. feComposite/out is one of them.

Upvotes: 1

Related Questions