网站开发进阶学习：Scalable Vector Graphics遮罩使用要点。
上节课我们了解到了maskunits和maskContentunits这两个mask标签上的非常重要的属性，但是通常情况下这两个属性其实都可以不用去设置。因为只要在使用遮罩层的时候把要使用的元素和遮罩层的绘制位置对齐就可以了。在这种不设置的情况下就能刚刚好把整个遮罩层应用在要使用裁切效果的图形上了。
简单的用代码来体验一下。这里有这样的一个图形，现在先把它绘制出来了。想对这个图形做一个遮罩处理，把一个遮罩应用在这个图形上，然后裁切出对应的效果。这里先去定义一个遮罩。
在做这种遮罩的时候其实一开始可以完全把它当成图形来处理，比如这里再来一个rect，这个颜色把它改成黑色，在这里来一个圆形，这个颜色先调个红色，然后把它调过来。其实大概就是想整体黑色加红色作为遮罩的图形元素，红色全部先改成白色，要不有一个改成灰色，让大家看一下这种灰色的效果。
这四个图形其实作为一个整体是遮罩层的图形效果。在确定了它们一个位置跟效果之后再把它们放到mask标签里面，这样其实它们的位置依然是在这里的。然后去给它定义一个id，是不是就有这样的效果了。
所以其实就是在使用这样一种遮罩层的时候完全可以把遮罩层的位置、图形都先按正常的元素去处理好，再把它丢到mask这种标签里面去。因为它在默认情况下绘制的参考目标是以SVG这样一个结构来做的，所以哪怕它丢到mask这样一个标签里面去，默认情况下依然这些数据。还是按照整体SVG的坐标结构来做的。但是这里如果标签上的content就是maskContentunits改成了objectBoundingBox，就不用它的默认值了，这样直接丢进去肯定就不行了。这些数据可能所有都要改成0-1的值或者百分比的值，这个上节课已经大概知道了。
其实在之前学过CSSmask属性里面也可以去使用在5VG当中定义好的mask标签的。比如这里上面有一个这样的图形，要让它去使用SVG当中的遮罩层，遮罩标签还是使用CS5当中的mask属性，而用的时候就是一样url，注意#，myMask就是id名。
可以看到当html元素去使用遮罩层的时候，产生的效果是在元素的右下角这里，这个其实就相当于是在使用遮罩层的时候，因为遮罩层是根据自身坐标系的坐标以及尺寸进行绘制的，会把对应的使用遮罩层的html元素左上角这里也理解成是类似的坐标系，就对应到这里的位置了。
但是如果把遮罩层的maskContentunits改成objectBoundingBox，也会对html元素产生类似的完全匹配，对应拉伸的效果。可以来看一下，改完这里之后这些东西都得改，都得改，可以来简单的看一下，就是这样的效果。
所以只要把相应的属性去调整成对应到使用元素上，肯定也是产生类似的效果。哪怕制罩层应用的是常规的html元素，遮罩层里面mask标签里面不光可以放常规的图形元素，包括路径的图形都是可以的。
还有像前面学过的SVG当中的文字，也是可以放进去的，相当于就可以用文字的效果去裁切其他的图形了。
如果想要切换成另外一种模式，就是之前讲过有两种模式，一种是灰度模式，一种是透明度模式。如果想切换成透明度模式其实也很简单，就是在mask上面设置mask-type，变成alpha，就off。
为什么设置这样一个模式之后，遮罩效果就完全消失了？这是因为现在整个图形上面，所有的这些图形上面都是有颜色的，而且颜色是没有透明度的。因为不管是白色、灰色还是黑色也好，颜色值都是没有透明度的值。
假如这里给黑色设置fi0l-opacity，就会看到已经有这样的效果了。也可以直接用填充色，本身的色值的透明度也是可以的。
但是在使用透明度效果当中，大家一定要注意一个问题，就是这些图形，因为绘制的时候是一层一层盖上去的，假如其中有一层已经是不透明度是1的情况，那么后面再盖这种有透明度的也不会产生透明度的效果了。比如这里让它来个1，后面图形的颜色不管fi0l-opacity怎么调，会发现都没有任何的效果。
但是如果把原来这里先调个0.5，第一个球这里是不是就已经有效果了？所以在处理这样的问题的时候就稍微要注意一下。通常来讲用遮罩就是用灰度的，默认的模式用的会比较多。