Safari中的剪切路径多边形不显示复杂路径

Question

我正在创建一个地图，当鼠标悬停并单击时，不同区域会突出显示。我已经在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渲染剪辑路径？