当前位置主页 > 资料库 > 前端教程 > 如何制作SVG文字蒙版遮罩效果

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

2015-01-09

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

svg剪切蒙版效果

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中制作同样效果要快得多。

Previous:
上一篇:如何制作HTML5 SVG描边文字
Next:
下一篇:基本的SVG样式属性
返回顶部