剪辑路径的边缘/IE 问题

Posted 2023-03-28

【中文标题】剪辑路径的边缘/IE 问题

【英文标题】：Edge/IE problems with clip-path

【发布时间】：2020-04-04 03:31:40

【问题描述】：

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

【问题讨论】：

您好 Bojan，如果您对某些代码有疑问，请编辑您的问题以在其中包含 minimal reproducible example。如果您对此有任何疑问，请参阅How to Ask 了解更多信息。

关于 IE（不是 Edge），根据 caniuse.com 的数据，全球 1.5% 的在线用户使用 IE11，0.03% 使用 IE10。 2019 年初，微软本身就警告大家停止使用 IE，称其不是浏览器，而是“兼容性解决方案”。

发现一些关于 Edge 的信息： Edge 将得到更新，将基于 Chromium，所以我确实下载了新的 beta 版本并且运行良好，所以从 1 月 15 日开始2020 年，Edge 的新版本将不再存在此问题。

【参考方案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')"   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。