svg中用mask来做遮罩非常方便,但是svg主要是用来做图形的,对文字处理比较差,比如换行,所以对于有文字的遮罩可能就。。。

好在出来了一个foreignObject标签,这个标签里面可以写html代码。不过foreignObject不支持ie,因此我们写遮罩就不得不对ie兼容。

下面就对一些常见的遮罩给出一个解决方案。

线性渐变遮罩

关键html:

关键js:

这里对代码做了兼容,对于非ie我们就采用foreignObject的方案,如果是ie,我们就采用filter方案。

document.write后面的\是用来链接换行字符串的。

兼容ie的线性渐变遮罩,用filter中的Alpha。

径向渐变遮罩

径向渐变遮罩对应的也是ie中的Alpha。

图形遮罩

兼容ie的图形遮罩用的是filter的chroma,指定颜色遮罩,这里指定的是#6de05a,遮罩图片如下:

这有点像拍电影后面的绿屏一样,拍的时候在绿屏里面拍,后期直接指定绿色透明就好了。

注意这里给svg中mask的图片背景是透明的,如下:

因为svg中的mask是根据亮度来遮罩的,他和filter的chroma原理可不一样。

DEMO下载

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

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

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

图片:

提交
还可以输入500个字