clip-path来源于svg，使用clip-path属性能做出一些意向不到的效果，我们一起来研究一下这个属性。clip-path的属性值有svg的url，这个是比较复杂的，我们这篇文章主要谈谈basic-shape属性。文章的最后会介绍clip-path在svg的一个应用，baseic-shape包括：inset，circle，ellipse,polygon,path,这5个属性值。下面分别介绍各个属性并且举了一些例子。
baseic-shape
inset属性
在css中inset是向内的意思，例如box-shadow的inset属性就是内阴影，同样clip-path的inset是向元素内部的偏移距离。语法：
<inset()> = inset( length-percentage{1,4} [ round <'border-radius'> ]? )
length-percenage属性指的是到元素border的距离。可以是1到4个数字，这和padding和margin的语法是一致的。默认的顺序是上边距，右边距，下边距，左边距。round指的是切割 矩形的圆角语法同border-radius，这里不再展开，border-radius是一个常用属性，有兴趣的同学可以深入入研究一下，例如怎么使用border-radius画一个鸡蛋形状，也就是说可以认为clip-path属性的值inset是 padding属性和border-radius属性的叠加，看下面的图片更加明了。
下面关于这个属性值举个例子，看下面的效果：
看起来很普通的样子其实细看一下文字颜色不是一下子变过来的而是随着切割线变化，这个组建还是比较少见的。代码如下：
circle和ellipse属性
这两个属性的语法是相似的:
<circle()> = circle( [ shape-radius ]? [ at position ]? )
<ellipse()> = ellipse( [ shape-radius{2} ]? [ at position ]? )
shape-radius:半径，position：半径，椭圆需要两个半径：长轴半径和短轴半径。position可以是具体的位置，也可以是百分比
polygon属性
从名字就可以知道多边形切割，语法<polygon()> = polygon( [ length-percentage， length-percentage ]# )可以是具体的单位也可是百分比，效果如下可以实现不同多边形的变化效果：(多边形变换效果)以上三个属性较为简单，就不举例子了（我还有没应用场景）。
path属性
语法：<path()> = path( ),MDN说的语法太简单了，其实path路径源于svg的path关键语法如下：
M : 移动到某一点（x,y）
L : 英语 lineto，线段连接到某一点（x,y）
H : 水平方向移动到某一点(x)，y为上一个点的y坐标
V : 竖直方向移动到某一点(y)，x为上一个点的x坐标
C : 三次贝塞尔曲线
S : 三次贝塞尔简写，前一个关键字，必须为C/S
Q : 二次贝塞尔曲线
T : 二次贝塞尔曲线简写，前一个命令必须为Q/T
A : 画圆弧
Z : 闭合曲线链接到起始点
注意，以上关键字小写标识相对位置
网上关于svg的path路径有很多介绍，有兴趣的同学可以自行搜索，我的学习方法是对关键字理解，知道具体的情况应该使用的曲线，例如画正弦函数使用二次贝塞尔曲线，具体的写法可以临时查看文档。必经不常用的不能都记住。下面举个例子，使用path属性实现下面的loading效果。
在介绍这个loading实现以前先要讲一讲Clip-path和 transition连用的情况，Transition用来控制某个属性的渐变过渡，例如背景色，示例代码：
.base{
width:200px;
height:200px;
background-color:aquamarine;
display: inline-block;
vertical-align: middle;
transition: background-color 1s ease-in-out;
}
.base:hover{
background-color: rgba(23,210,12,.2);
}
这个代码是没有问题的，Css的颜色值有好多不同的写法，这种Transition属性是可以使用的。但是Transition的过渡属性是clip-path那就比较特殊了，例如clip-path:circle,不能和clip-path: ellipse过渡，只能是circle，当clipth-path的值为path是更加苛刻，要求path的关键字必须是一样的，只能是数值发生变化。
明白了这以后，来看看这个loading的实现原理：使用两张图片叠加在一起前面的图片使用clip-path属性的path，水的波纹效果是有path的二次贝塞尔曲线画出来。然后最终的效果是这条曲线向右移动一个周期，然后循化动画就行了，源码如下：
当然这是一个半成品，数字还不会变化，不过有了这样的思路，聪明的你一定可以实现想要的效果。
Svg与clip-path属性
svg的clip-path属性更加复杂一点，有兴趣的同学可以深入研究一下。我这里介绍一个应用。现在好多大屏展示，或者其它一些场景要求有流光效果如图：
这个里面主要使用的svg的mask，clip-path,还有svg动画，稍微有点复杂。代码实现的思路是使用svg的stock-dash属性动画，用mask做一层遮罩，遮罩层使用动画和渐变色。就能做出来流光的效果。关键代码如下:
小tips：这个svg动画有个小的问题，水平或者竖直的svg线段是无效的，不能产生动画效果，我感觉像是svg的小bug。解决办法是水平线段路径后面加上 v1，竖直线段加上h1，就能解决问题了。以上就是clip-path的全部内容，谢谢观赏，水平浅薄，欢迎指正。
