标签：
这个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的背景设置为图像。这两种方法都可以制作出遮罩效果
<div style="width: 550px;height: 130px;background-image: url(1.jpg);"> <svg width="100%" height="100%"> <defs> <mask id="mask"> <rect width="100%" height="100%" fill="#fff"></rect> <text x="0" y="120" style="fill: #000;font-size: 120px;stroke-width: 5;stroke: #000;fill-opacity: 0.5;">Welcome</text> </mask> </defs> <rect width="100%" height="100%" mask="url(#mask)" fill="#fff"></rect> </svg> </div>
标签：
原文地址：http://www.cnblogs.com/sonwrain/p/4837401.html
