HTML5 SVG制作精美的文字遮罩效果

HTML5 SVG可以制作出许多绚丽的动画和效果，在这个教程中，我们将要制作一种类似Photoshop的文字遮罩效果。如何使这种遮罩效果可以跨浏览器使用是我们的研究重点。

这个SVG文字遮罩效果的思路是在文字下面放一张图片，然后通过CSS使文字以外的区域不可见。如果单纯的使用HTML代码来完成这种效果，只有使用像Flash/Silverlight之类的工具。而使用SVG来制作则可以十分轻松的完成。

我们将使用下面的这张图片来作为文字的背景：

我们可以有两个解决方案。第一种是使用CSS来制作。通过CSS的mask属性也可以实现文字遮罩效果：

#myImg {
  mask: url(#myMask);
}                                
                            

这个解决方案十分直接简单，但不幸的是，它不能在webkit内核的浏览器上工作，如google chrome浏览器。

第二种解决方案是使用SVG。将一个SVG对象放置在一张图片上面，SVG中包含要制作遮罩效果的文字。SVG对象可以使用z-index属性直接放到图片的上面，或者将SVG放到一个div中，将div的背景设置为图像。这两种方法都可以制作出遮罩效果。

下面是最终的文字遮罩效果：

SVG文字有5像素的描边和边部100%的透明度，文字的填充使用50%的透明度。

本例的HTML代码如下：

 <div id="bkDiv">
  <svg width="100%" height="100%">
    <defs>
      <mask id="theMask">
        <rect width="100%" height="100%" fill="#fff" />
        <text x="0" y="120" id="theText" fill="#000">Welcome</text>
      </mask>
    </defs>
    <rect width="100%" height="100%" mask="url(#theMask)" fill="#fff" />
  </svg>
</div>                               
                            

CSS代码如下：

#bkDiv
{
  background-image : url('my_image.jpg');
  height:130px;
  width:550px;
}

#theText
{
  font-size:140px;
  font-family:impact;
  stroke:#000;
  stroke-width:5px;
  fill-opacity:0.5;
}                                
                            

我们还可以使用CSS3来制作遮罩文字的背景动画，这将是更有趣的效果，我们将在后面的教程中讲解这些技术。