剪辑路径的Edge / IE问题

时间:2019-12-10 21:44:07

标签: javascript internet-explorer svg microsoft-edge clip-path

创建一个带有圆形旋转菜单的网站,该网站在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中看到错误的渲染。

1 个答案:

答案 0 :(得分:0)

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