您的位置:首页> HTML5教程> SVG教程

SVG <mask>蒙板

2018-9-13 09:36| 作者: admin| 查看: 2226| 评论: 0|来自: 蚂蚁部落

使用<mask>可以定义一个蒙版。

<clipPath>裁切路径和<mask>蒙版非常类似,甚至可以说实现同一类型的效果。

它们之间的主要不同点是:

(1).裁切路径是可见与不可见的突变,要么可见要么不可见。

(2).蒙版则是可见与不可见的渐变,期间可以有过渡效果。

关于裁切路径的基本用法可以参阅SVG <clipPath>裁切路径一章节。

蒙板用<mask>元素定义,只需要在渲染对象的mask属性中引用蒙板即可。

<mask>元素可以包含任何的图形元素和容器元素(例如<g>)。

蒙板效果基本就是根据蒙板中每个点的颜色和透明度计算出一个最终的透明度,然后在渲染对象的时候,在对象上面罩上这个带有不同透明度的蒙板层,体现出蒙板效果。对于渲染对象来说,只有在蒙版内的部分会按照蒙板上点的透明度来渲染,不在蒙板内的部分不显示。代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:800px;
  height:350px;
}
</style>
</head>
<body>
  <svg>
    <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">
        蚂蚁部落欢迎您
      </text>
    </defs>
 
    <rect x="0" y="0" width="800" height="300" fill="#ccc" />
    <use xlink:href="#Text" fill="blue" mask="url(#Mask)" />
    <use xlink:href="#Text" fill="none" stroke="black" stroke-width="2" />
  </svg>                        
</body>
</html>

下面对代码简单做一下介绍:

(1).蒙版的透明度是可以过渡的。

(2).自行修改蒙版的尺寸,引用蒙版的元素尺寸超过这个尺寸是不可见的。

特别说明:

(1).蒙版仅支持黑或白和透明度。

(2).当颜色为纯白色时,蒙版透明度控制蒙版层透明度;当颜色为纯黑色时,无论透明度是多少均是透明的。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:800px;
  height:350px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient
                      id="Gradient"
                      gradientUnits="userSpaceOnUse"
                      x1="0" y1="0"
                      x2="800" y2="0">
        <stop offset="0" stop-color="green" stop-opacity="0" />
        <stop offset="1" stop-color="green" 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>
    </defs>
  
    <rect x="0" y="0" width="800" height="300" mask="url(#Mask)" />
  </svg>                        
</body>
</html>

设置渐变颜色为绿色,但是表现为黑白效果;尽管总是表现黑白,但不同颜色的程度有差别。

当设置颜色为黑色的时候,无论如何设置透明度,始终表现为透明效果。

maskUnits属性:

具有两个属性值:

(1).objectBoundingBox(默认值)表示mask元素坐标(x,y)和尺寸(width,height)的坐标系统使用引用该蒙板的元素的当前用户坐标系。

(2).userSpaceOnUse表示mask元素坐标(x,y)和尺寸(width,height)的坐标系统用相对于引用蒙板的元素的包围盒的相对值。

maskContentUnits属性:

与上面两个属性作用类同,只不过是设置<mask>子元素所采用的坐标系,即x, y, width和height的取值方式。

具有两个属性值:

(1).userSpaceOnUse(默认值)。

(2).objectBoundingBox,在此属性值下,x, y, width和height的默认值分别是-10%,-10%,120%,120%。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

返回顶部