详细信息
ClipPath jQuery 插件为 CSS3 clip-path 属性生成 SVG 回退，使其适用于不同的浏览器（Chrome、Firefox、Safari 和 Opera）。该插件目前支持将元素裁剪为多边形。
也可以看看：
使用 jQuery 的简单路径裁剪插件 - 裁剪路径多边形
通过包管理器安装它：
# Yarn
$ yarn add clip-path
# NPM
$ npm install clip-path如何使用它：
1.下载并把ClipPath插件的脚本放在jQuery库之后。
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="dist/clippath.min.js"></script>2. 在目标元素上调用该函数并指定定义应显示元素的哪个部分的剪辑区域。
$('.element').ClipPath('5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%');3. 您还可以在 'data-clip' 属性中指定剪切区域，如下所示：
<div class="element" data-clip="5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%">
</div>$('.element').ClipPath();4. 如果你想在纯 JavaScript 中实现剪辑路径 polyfill。
// ClipPath(selector, polygon_value)
ClipPath('.element', '5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%')更改日志：
2017-10-30
修复使用多个元素的情况。在修复之前，对 [NodeList] 中的所有元素应用了一个相同的掩码。例如 - '.block img[data-clip]'
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。