刚接触svg mask的朋友可能会被被搞混,这里有很多相似但是有不同的东西,下面带大家走一遍。

mask标签

这是定义在svg的defs中的一个玩意,用来声明一个遮罩的。

现在我们定义一个圆形遮罩,然后将它运用在一个矩形上,如下:

mask标签上有两个比较有意思的属性,一个是maskUnits,还有一个是maskContentUnits。

maskUnits和x,y,width,height关联,是用来设置这些属性的单位,可以选择userSpaceOnUse和objectBoundingBox。

maskUnits:userSpaceOnUse(绝对单位)

这里设置x='30' y='20',这里的单位和外面的单位一致。

maskUnits:objectBoundingBox(相对单位)

这里设置x=.5 y=.6,这里的单位是根据使用遮罩者的宽度和高度来缩放的。

还有一个是maskContentUnits是用来设置mask里面单位,默认值是userSpaceOnUse,采用绝对单位,因为上面都是这种例子,因此这里只是列举objectBoundingBox的情况。

maskContentUnits:objectBoundingBox

里面画圆的时候,用的是cx='.5', cy='.5' r='.3'。这里也是相对使用遮罩者的长和宽来进行缩放。

这两都是用来设置单位的,只是对象不同,一个是用来设置mask自己进行x,y,width,height操作时候的单位,一个是用来设置内部元素的单位。

mask属性和-webkit-mask-image

这两个属性都是可以用来设置遮罩的,mask属性更多的是用在svg上,而-webkit-mask-image更多的用在非svg上。

mask用在svg元素上

mask用在svg元素上是根据亮度(luminance)去遮罩的,它的原理是白色的认为看得到,保留,黑色的认为看不到,剔除。

看到没有,用来遮罩的内容中,黑色的被剔除,白色的被完全保留,这里还可以存在灰度,当颜色是灰的时候,就是有透明度的遮罩。

注意这里被剔除的部分是白色,为什么呢?其实被剔除后就露出了下面的颜色,因此这里的白色是背景颜色。

上面的遮罩图形是我们自己画的,如果遮罩图形来自图片也是遵循这个原理,就是按照亮度去遮罩。

mask用在非svg元素上和-webkit-mask-image用在svg元素上

这两个都是属于交叉的,兼容性很差。

上面在svg中定义了一个mask,然后在普通元素中引用遮罩,只有在firefox中有效果。

上面在svg元素中使用-webkit-mask-image,只有在firefox中有效果。

-webkit-mask-image用在非svg元素

这种遮罩的原理是透明度(alpha),透明的部分剔除,不透明的保留。

看到没,这里和颜色无关,不管什么颜色,只要不是透明的,都保留,这里通过透明度来控制遮罩的程度,例如上面的椭圆是半透明的,因此它的遮罩是有透明度的。

这里需要注意的是一种写法:-webkit-mask-image:url(./mask.svg),这里的svg是相当于图片的,和上面将的svg没有关系,遮罩原理同样是alpha。

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字