html5 svg 图像遮罩,如何制作SVG文字蒙版遮罩效果

一个剪切蒙版的概念非常简单：使用一个图形来约束一幅图像，使图像只有在图形轮廓下面的部分可见，创建一种“cookie-cutter”效果。

SVG格式在几年前就已经支持剪切蒙版了，通过我们前一篇文章学习的SVG描边文字，再来整合剪切蒙版效果是非常容易的。

首先，将你需要的图片放置在页面中，它将作为蒙版图片。

对于图像有两个要求：1、它必须必SVG文字大；2、它必须有一个ID属性，用于CSS文件通过ID选择器找到该图片。

接下来，我们要创建SVG文件。下面使用个简单的SVG文件，我们命名为knockout.svg。

KNOCKOUT

来观察元素，x和y值是文字的偏移量，fill是文字的颜色。字体的书写方式就和书写CSS的方式是一样的。

在文本外面使用和来进行包裹，这表示我们将使用文字来作为遮罩使用(注意：mask标签有一个id)。最后一行代码要指向文本的ID。

最后，通过CSS来制作SVG文字模板遮罩效果：

#knockout-text {

mask: url(knockout.svg#mask);

-webkit-mask-image: url(knockout.svg); }

}

mask属性在Firefox、Opera 和 IE中使用，用于指向knockout.svg文件的。Chrome 和 Safari需要第二行代码，来执行相同的动作。

通过上面的制作，你会发现，你现在得到的只是一张图片。没错，你没有做错！在页面中你看不到"KNOCKOUT"文字，但你你可以拖动这个SVG图片到桌面上，它将保存为一个图片文件，打开这个图片你就可以看到遮罩效果了。在后面的而文章中，我们将教你通过修改SVG文件来制作各种遮罩效果，这种效率要比在photoshop中制作同样效果要快得多。