HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用


Posted in HTML / CSS onJanuary 30, 2013

SVG支持的蒙板

SVG支持多种蒙板特效,使用这些特性,我们可以做出很多很炫的效果。至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了,这里都叫做蒙板吧。

SVG支持的蒙板类型:
  1. 裁剪路径(cliping path)

裁剪路径是由path, text或者基本图形组成的图形。所有在裁剪路径内的图形都可见,所有在裁剪路径外的图形都不可见。
  2. 遮罩/蒙板(mask)

蒙板是一种容器,它定义了一组图形并将它们作为半透明的媒介,可以用来组合前景对象和背景。
裁剪路径和其他的蒙板一个重要的区别就是:裁剪路径是1位蒙板,也就是说裁剪路径覆盖的对象要么就是全透明(可见的,位于裁剪路径内部),要么就是全不透明(不可见,位于裁剪路径外部)。而蒙板可以指定不同位置的透明度。

视窗的裁剪路径 - overflow和clip属性

HTML元素的overflow属性和clip属性共同设置了该元素对内容的剪裁行为。同样的,在SVG中,这2个属性还可以使用。

overflow = visible | hidden | scroll | auto | inherit
overflow属性定义了当元素的内容超过元素的边框的时候采取的行为。

这个属性可以用于能创建新视窗的元素(svg,symbol,image,foreignObject),pattern和marker元素。这个属性的取值含义如下:
  visible:显示所有内容,即使是内容已经在元素的边框外边,这个是默认值。
  hidden:隐藏超出裁剪路径的内容。裁剪路径由clip属性指定。
  scroll:采用滚动条的形式,呈现超出的内容。
  auto:采用浏览器定义的行为,这个似乎不太可靠。
这个属性和CSS2中的同名属性基本相同,只不过在SVG中,有一些不同的处理过程:
  1.overflow属性对于除了创建新视窗的元素(svg,symbol,image,foreignObject),pattern和marker元素外的元素都没有效果。
  2.裁剪路径与视窗是对应的,创建了新的视窗,就创建了新的裁剪路径。默认的裁剪路径就是视窗边界。
clip = <shape> | auto | inherit
clip属性用于设置当前视窗的裁剪路径。

这个属性可以用于能创建新视窗的元素(svg,symbol,image,foreignObject),pattern和marker元素。这个属性和CSS2中同名属性有一样的参数。auto代表裁剪路径与视窗边框是一致的。当使用图形作为参数时(设置裁剪矩形的top,right,bottom和left的值), 可以使用用户坐标值(即不带单位的坐标)。例如:

复制代码
代码如下:

P { clip: rect(5px, 10px, 10px, 5px); }

这里注意,默认情况下(overflow和clip都取默认值),裁剪路径是与视窗的边框是一致的。当设置了viewBox和preserveAspectRatio以后,通常也需要把clip裁剪路径的四边映射成viewBox的四边,这样才能保证某些显示效果还是一样的(当然如果都是默认值,就不用设了)。

对象的裁剪路径 - clipPath元素
裁剪路径使用clipPath元素定义,然后使用clip-path属性引用。
clipPath可以包含path元素,text元素,基本的图形元素(circle等)和use元素。如果是use元素,则它必须是直接引用path,text或者基本图形元素,不能引用的是其他的元素。
注意裁剪路径只是一位的遮罩层,该路径是包含的所有的元素的并集。在这个集合中的对象就可以显示,不在这个范围内的对象就不显示。具体判定点在不在范围内的算法由"clip-rule"属性指定。

对于图形对象,裁剪路径等于自己clip-path设置的裁剪路径与所有外层元素的裁剪路径(包括clip-path和overflow设置的裁剪路径)的并集。注意几点:
  1.clipPath元素自身并不会从外层节点继承clipPath定义的裁剪路径。
  2.clipPath元素自身可以设置clip-path属性。效果是两个路径的交集。
  3.clipPath元素的子元素可以设置clip-path属性:效果是两个路径的并集。
  4.空裁剪路径会裁掉元素内所有的内容。
下面看看几种重要的属性:
clipPathUnits = "userSpaceOnUse(默认值) | objectBoundingBox"
这个属性定义了clipPath元素使用的坐标系统,这两个值我们都很熟悉了,分别是采用引用当前裁剪路径的元素的用户坐标系统和包围盒比例值。
clipPath元素从来不直接渲染,都是通过clip-path被引用,所以设置clipPath元素的display属性没有作用。
clip-path = “<url(#裁剪路径名)> | none inherit”
这个属性不用多说了,用于引用裁剪路径,这里需要注意的是,所有的容器元素,基本图形元素和clipPath元素都可以使用这个属性。
clip-rule = "nonzero(默认值) | evenodd | inherit"
这个属性用于确定哪些点是属于裁剪路劲内部的点。对于简单的封闭图形,这个很好判定,但是对于复杂的内部有洞的图形,就有区别了。这个属性的取值与fill-rule的取值含义是一样的:
  nonzero:这个值采用的算法是:从需要判定的点向任意方向发射线,然后计算图形与线段交点的处的走向;计算结果从0开始,每有一个交点处的线段是从左到右的,就加1;每有一个交点处的线段是从右到左的,就减1;这样计算完所有交点后,如果这个计算的结果不等于0,则该点在图形内,需要填充;如果该值等于0,则在图形外,不需要填充。看下面的示例:

HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
  evenodd:这个值采用的算法是:从需要判定的点向任意方向发射线,然后计算图形与线段交点的个数,个数为奇数则改点在图形内,需要填充;个数为偶数则点在图形外,不需要填充。看下图的示例:

HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
clip-rule属性只能用于clipPath元素的内部图形元素。例如下面的设置是起作用的:

复制代码
代码如下:

<g>
<clipPath id="MyClip">
<path d="..." clip-rule="evenodd" />
</clipPath>
<rect clip-path="url(#MyClip)" ... />
</g>

如果元素不在clipPath中是不起作用的。例如下面的设置是不起作用的:
复制代码
代码如下:

<g clip-rule="nonzero">
<clipPath id="MyClip">
<path d="..." />
</clipPath>
<rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
</g>

最后看裁剪路径的一个小例子:
复制代码
代码如下:

<svg width="100px" height="100px">
<g>
<clipPath id="MyClip">
<path d="M 10,10 L 10,20 L 20,20 L 20,10 Z" clip-rule="evenodd" />
</clipPath>
</g>
<rect clip-path="url(#MyClip)" x="10" y="10" width="80" height="80" fill="Red" />
</svg>

矩形只有左上角10*10的区域是可见的。

蒙板- mask元素
在SVG中,你可以为渲染的对象指定任何的图形元素或者g元素作为蒙板,来将渲染对象组合到背景中。
蒙板用mask元素定义,使用蒙板的时候只需要在对象的mask属性中引用蒙板就可以了。
 mask元素可以包含任何的图形元素和容器元素(例如g)。
蒙板的效果其实大家也比较清楚,基本就是根据蒙板中每个点的颜色和透明度计算出一个最终的透明度,然后在渲染对象的时候,在对象上面罩上这个带有不同透明度的蒙板层,体现出蒙板的遮挡效果。对于渲染对象来说,只有在蒙版内的部分会按照蒙板上点的透明度来渲染,不在蒙板内的部分不显示。看下面的例子:

复制代码
代码如下:

<svg width="8cm" height="3cm" viewBox="0 0 800 300" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="Gradient" gradientUnits="userSpaceOnUse"
x1="0" y1="0" x2="800" y2="0">
<stop offset="0" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="1" />
</linearGradient>
<mask id="Mask" maskUnits="userSpaceOnUse"
x="0" y="0" width="800" height="300">
<rect x="0" y="0" width="800" height="300" fill="url(#Gradient)" />
</mask>
<text id="Text" x="400" y="200"
font-family="Verdana" font-size="100" text-anchor="middle" >
Masked text
</text>
</defs>
<!-- 视窗的背景 -->
<rect x="0" y="0" width="800" height="300" fill="#FF8080" />

<!-- 第一步绘制一个带有蒙板的Text,可以看到蒙板的透明度效果已经应用到字上了.
第二步是绘制一个不带蒙板的Text,来作为第一步Text的轮廓 -->
<use xlink:href="#Text" fill="blue" mask="url(#Mask)" />
<use xlink:href="#Text" fill="none" stroke="black" stroke-width="2" />
</svg>


效果如下图所示:

HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用

大家可以试着将上面mask元素中的rect元素的width改成500,你会看到Text的一部分不显示了,这就是因为那部分已经超出蒙板的范围了。这里其实也看到了,上面的裁剪路径只不过是一种特殊的蒙板(每个点的透明度要么是0,要么是1)。
蒙板的定义和使用已经介绍了,下面看几个重要的属性:
  maskUnits = "userSpaceOnUse | objectBoundingBox(默认值)"
定义了mask元素中坐标(x,y)和长度(width,height)的坐标系统:使用引用该蒙板的元素的用户坐标系,或者是使用相对于引用蒙板的元素的包围盒的相对值。这个值的含义与前面章节中的单位含义是相同的。
  maskContentUnits = "userSpaceOnUse(默认值) | objectBoundingBox"
定义了mask元素中子元素的坐标系统。
  x, y, width, height
定义了蒙板的位置和大小,在默认的objectBoundingBox坐标下,默认值分别为-10%,-10%,120%,120%。

此外要注意:蒙板不会直接渲染,只会在引用的地方起作用,所以display,opacity等属性对于mask元素来说都是不起作用的。

实用参考:
脚本索引:http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
开发中心:https://developer.mozilla.org/en/SVG
热门参考:http://www.chinasvg.com/
官方文档:http://www.w3.org/TR/SVG11/

HTML / CSS 相关文章推荐
详解CSS3伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
CSS3模块的目前的状况分析
Feb 24 HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 #HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 #HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 #HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 #HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 #HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 #HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 #HTML / CSS
You might like
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
动手学习无线电
2021/03/10 无线电
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
Python实现识别手写数字大纲
2018/01/29 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
python 字典中取值的两种方法小结
2018/08/02 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
python树的同构学习笔记
2019/09/14 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
秋季运动会表扬稿
2014/01/16 职场文书
养牛场项目建议书
2014/05/13 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏
python manim实现排序算法动画示例
2022/08/14 Python