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各自的实现方式

<defs>

            <mask id="maskd">

                <circle cx="100" cy="100" r="50" fill="#fff" stroke="transparent" stroke-width="20"></circle>

                <circle cx="100" cy="100" r="40" fill="#000" stroke="transparent" stroke-width="20"></circle>

                <rect width="100" height="400" x="0" fill="#000"></rect>

            </mask>

            <mask id="maskdd">

                <path d="M0 50,50 100" stroke="white" stroke-width="20" />

            </mask>

            <clipPath id="clipd">

                <rect width="100" height="400" x="100" clip-path="url(#clipdd)"></rect>

            </clipPath>

</defs>

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

clip-path: url(#clip);

mask: url(#c1ip);

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

clip-path="url(#clipd)"

mask="url(#maskdd)"

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

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

结束语

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