Сбой рендеринга SVG-маски Safari (clip-path) - PullRequest
Новая
       103

Сбой рендеринга SVG-маски Safari (clip-path)

0 голосов
/ 06 мая 2020

Я пытаюсь создать эффект раскрытия изображения с помощью маски SVG, где путь с довольно сложной геометрией масштабируется с помощью CSS преобразований: 

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

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

Я тестировал эффект в Chrome, Firefox и Safari. Первые два браузера представляют то, что я хочу достичь, но у Safari есть реальные проблемы и сбои. . https://caniuse.com/#search = clip-path

Есть идеи?

1 Ответ

0 голосов
/ 07 мая 2020

Спасибо @Robert за вашу помощь. Решение, которое я придумал, - просто поместить тег img как тег изображения в SVG.

Вместо: 

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

Теперь у меня есть: 

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

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

Это работает для меня.

...