Многоугольник пути клипа в Safari не отображается для сложных путей - PullRequest
Новая
       36

Многоугольник пути клипа в Safari не отображается для сложных путей

0 голосов
/ 16 мая 2019

Я создаю карту, где различные области выделяются при наведении курсора и кликабельности.Я получил рабочую версию для Chrome, но во время тестирования Safari кажется, что пути клипов не работают должным образом.

Каждый регион карты является изображением.Каждое изображение имеет клип-карту, определенную с помощью CSS. 

.class {
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Этот пример отлично работает в Safari.Однако регионы на самом деле более сложные, поэтому, как правило, точек гораздо больше. 

    -webkit-clip-path: polygon(60% 100%, 59% 87%, 57% 89%, 55% 65%, 57% 65%, 57% 58%, 6% 68%, 5% 65%, 0% 65%, 0% 58%, 24% 52%, 22% 17%, 39% 12%, 43% 16%, 46% 16%, 46% 21%, 55% 20%, 55% 11%, 58% 10%, 61% 9%, 63% 6%, 65% 7%, 65% 5%, 63% 2%, 63% 0%, 67% 0%, 69% 4%, 73% 4%, 75% 4%, 75% 0%, 77% 0%, 78% 5%, 81% 8%, 81% 2%, 84% 5%, 87% 9%, 89% 10%, 91% 14%, 93% 19%, 96% 23%, 97% 28%, 99% 36%, 100% 40%, 100% 43%, 61% 100%);
    clip-path: polygon(60% 100%, 59% 87%, 57% 89%, 55% 65%, 57% 65%, 57% 58%, 6% 68%, 5% 65%, 0% 65%, 0% 58%, 24% 52%, 22% 17%, 39% 12%, 43% 16%, 46% 16%, 46% 21%, 55% 20%, 55% 11%, 58% 10%, 61% 9%, 63% 6%, 65% 7%, 65% 5%, 63% 2%, 63% 0%, 67% 0%, 69% 4%, 73% 4%, 75% 4%, 75% 0%, 77% 0%, 78% 5%, 81% 8%, 81% 2%, 84% 5%, 87% 9%, 89% 10%, 91% 14%, 93% 19%, 96% 23%, 97% 28%, 99% 36%, 100% 40%, 100% 43%, 61% 100%);

В Chrome все хорошо, но не в Safari.Похоже, что путь клипа не отображается вообще.Все эти точки необходимы, чтобы правильно очертить фигуру.

SVG - не вариант.

Как бы я позволил Safari отрисовать путь клипа?

...