svg基础---蒙版

这个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>

 SVG剪裁路径是指根据指定的路径或形状来剪裁SVG图形。应用了剪裁路径的SVG图形，在剪裁路径内部的图形可以被显示出来，在剪裁路径之外的图形会被隐藏

<svg width="550" height="130">

    <defs>
        <clipPath id="rect">
            <text x="250" y="110" style="font-size: 10px;">Welcome</text>
        </clipPath>
    </defs>
    <!--<circle cx="100" cy="100" r="50" fill="#000" style="clip-path: url(#rect);"/circle>-->
    <image x="10" y="10" width="100%" height="100%" xlink:href="../img/yellow.jpg" style="clip-path: url(#rect);"/>
</svg>