如何制作SVG文字蒙版遮罩效果

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

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

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

<img src="yukon-river.jpg" alt="Knockout" id="knockout-text">                                
                            

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

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <mask id="mask">
            <text x="0" y="100" id="knockout" fill="white" style="font-size:120px; font-family: Blue Highway, Arial Black, sans-serif;">KNOCKOUT</text>
        </mask>
    </defs>
    <use xlink:href="#knockout"/>
</svg>                                
                            

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

在文本外面使用<defs>和<mask>来进行包裹，这表示我们将使用文字来作为遮罩使用（注意：mask标签有一个id）。最后一行代码<use xlink:href="#knockout"/>要指向文本的ID。

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

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

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

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