剪切路径的Edge / IE问题

Question

创建一个带有圆形旋转菜单的网站，它在Chrome，Firefox和Opera上运行良好，但是Edge和IE出现了一些问题。最主要的是Edge / IE不支持剪切路径，所以你们知道一些解决方法，每个建议都会有所帮助。

我正在使用这个jQuery插件：https://www.jqueryscript.net/rotator/Circular-Rotating-Slider-jQuery-CSS3.html

您可以在此处尝试演示：https://www.jqueryscript.net/demo/Circular-Rotating-Slider-jQuery-CSS3/并在Edge中看到错误的渲染。

Answer 1

Microsoft Edge和IE 11仅支持CSS clip-path属性in SVG。格式如下：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 680" style="position:absolute; width: 100%; height: 100%">
        <clipPath id="myClip">
            <path d="M 0 108.784 A 811.972 811.972 0 0 1 811.972 108.784 L 613.832 451.972 A 415.692 415.692 0 0 0 198.14 451.972 Z" />
        </clipPath>
        <image clip-path="url('#myClip')" width="827px" height="550px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://static.pexels.com/wp-content/uploads/2014/06/bridge-city-night-645-827x550.jpg" />
</svg>

JQuery演示在HTML元素上使用clip-path，在IE 11和Microsoft Edge中为not supported。