CODEWITHSUNDEEP
svgsafarimaskclip-path
rberneder
rberneder

Reputation: 9

Safari SVG mask render glitch (clip-path)

I'm trying to make an image unveil effect with an SVG mask, where a path with a quite complex geometry is scaled via CSS transforms:

  clip-path: url(#aqua-dot-mask);

https://codepen.io/rberneder/pen/pojaNex

I tested the effect in Chrome, Firefox and Safari. The first two browsers are presenting what I want to achieve, but Safari has real troubles and glitches.

It seems Safari still has no full support of the clip-path property, but it should be capable of this particular one. https://caniuse.com/#search=clip-path

Any ideas?

Upvotes: 0

Views: 821

Answers (1)

rberneder
rberneder

Reputation: 9

Thanks @Robert for your help. The solution I came up with is to just put the img tag as image tag into the SVG.

Instead of:

<img src="..." style="clip-path(#mask)" />
<svg>
    <defs>
        <clipPath id="mask">...</clipPath>
    </defs>
</svg>

I now have:

<svg>
    <defs>
        <clipPath id="mask">...</clipPath>
    </defs>
    <image href="..." style="clip-path: url(#mask);" />
</svg>

https://codepen.io/rberneder/pen/xxwYmOj

This works for me.

Upvotes: 0

Related Questions