css svg clippath mask 使用svg蒙版制作特殊形状的图形

前提

css   现在已经支持clip-path,mask进行图片的裁切，从而实现各种特殊形状

clip-path 和mask 的异同点

clip-path里面的只能是基础图形，css 里有对应的circle()等基本图形函数进行实现，他所定义的图形为裁剪出来的可是区域，因为不支持path的缘故，在简单图形上裁切上它的效果不错但是在灵活度上比较差。

它在一个clippath标签里的复合图形组合能实现的方式也只有图形相加，定义多个clippath 实现的也是图形相交，并不能实现图形相减。

mask就厉害了，它有主要两大功能，一是可以使用path,这意味着任意图形都能通过它实现，二是透明度，它的裁剪是通过颜色来实现的黑色为不可见，白色为可见，黑与白之间的颜色会被映射成透明度实现区域的可见渐变。

它可以实现任意的图形相加，相交，相减，通过图形颜色的定义，还可以实现单一曲线或者不规则路径的裁剪。

clip-path 和mask   在svg各自的实现方式

           

               

               

               

           

            

               

           

            

               

           

在css中的调用（使用定义的id调用）

clip-path: url(#clip);

mask: url(#c1ip);

在svg中的调用（在对应标签里使用id调用）

clip-path="url(#clipd)"

mask="url(#maskdd)"

这两个的和其他属性的结合动效

圆环渐变进度条，不规则形状外框切换都可以沿用这样的思路

结束语

看了很多资料发现css的蒙版资料没有整合在一起有点难受，加上项目需要就把他们之间联动起来讲一下。