SVG实战开发学习（六）——剪裁和遮罩
剪裁和遮罩"本是同根生"，都是用来控制图像哪些部分需要显示，哪些部分无需显示的，剪裁其实是一种边缘清晰的遮罩。大家如果玩过剪纸，也许会有这种经验：拿两张纸叠加在一起，一张是已经剪好的，另外一张是未经剪裁的长方形纸。我们会按照已经剪好的纸的轮廓来裁减另外一张纸，最后两张纸的轮廓就会相差无几。剪裁的原理也是这样，凡是路径范围内的区域可以显示，之外的区域就不显示出来了。而遮罩是使用透明度来实现图像的渐隐和渐现。
<svg width="800" height="400">
<defs>
<clipPath id="clipPathDefinition" style="clip-rule:evenodd"
clipPathUnits="userSpaceOnUse">
<path d="m0,200 l100,-100 100,100 -100,100z"/>
</clipPath>
</defs>
<g transform="translate(50,0)">
<rect clip-path="url(#clipPathDefinition)"
fill="black"
style="stroke:black"
x="0" y="100" width="200" height="200"/>
<rect
fill="none"
style="stroke:black"
x="0" y="100" width="200" height="200"/>
</g>
</svg>
位置相同的两个矩形，做比较用，一个有填充色，一个没有填充色；一个需要剪裁，一个不需要。经过剪裁后就剩下中间黑色矩形部分，也就是剩下剪裁路径的内部部分。
遗留问题：剪裁路径——<path d="m0,200 l100,-100 100,100 -100,100z"/>路径点？？？
【遮罩<mask>元素】
与<clipPath>元素相比，<mask>元素所包含的子元素无须只具有线条性质的元素，可以包含任何可视化元素，甚至是<g>元素。这些可视化的子元素都必须带上透明度的定义，因为<mask>元素是通过透明度来控制图像与背景的遮罩效果的。
使用时，可以在欲使用遮罩效果的图元的"style"属性中使用"mask"参数。以URI形式定义好的<mask>元素，其使用方法与<clipPath>元素一样。
如果SVG阅读器进行渲染时，遇到"opacity"、"fill-opacity"等与透明度相关的属性或者参数时，将使用这些透明度值来进行遮罩效果的渲染。
id：定义了剪裁路径的ID标识，其他元素通过引用该标识来引用该剪裁路径。
maskUnits=" userSpaceOnUse | objectBoundingBox "含义同<clipPathUnits>属性。
x：定义该遮罩所在的矩形区域左上角顶点的X轴坐标，其坐标单位由" maskUnits "属性决定，默认值是-10%。
y：定义该遮罩所在的矩形区域左上角顶点的Y轴坐标，其坐标单位由" maskUnits "属性决定，默认值是-10%。
width:定义该遮罩所在的矩形区域的宽度，其坐标单位由" maskUnits "属性决定的，默认值是120%。
height：定义该遮罩层所在的矩形区域的高度，其坐标单位由" maskUnits "属性决定的，默认值是120%。
mask=" uri "：定义引用其他<mask>元素的URI。
【实例】
<svg width="8cm" height="3cm" viewBox="0 0 800 300" version="1.1">
<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="myMask" 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="MaskText" x="400" y="200"
font-family="Verdana" font-size="120" text-anchor="middle" >
COOL SVG
</text>
</defs>
<use xlink:href="#MaskText" fill="red" mask="url(#myMask)" />
<use xlink:href="#MaskText" fill="none" stroke="black" stroke-width="2" />
</svg>
<!-- 在该例的<defs>元素中，先定义了一个色彩渐变，这个渐变有两个渐变关键点，这两个渐变的关键点是一样的都是白色，但是透明度从0过渡到了1，也就是从透明过渡到了不透明，定义<mask>元素，它含有一个矩形子元素，这个矩形引用了定义的色彩渐变
，这个矩形也就具有了从左到右，从不透明到透明的效果，从实例可以看出，文字的效果正是从左边的偏白色到右边的红色，正是这个矩形遮罩在文字上的效果。使用<use>元素引 用<defs>元素中中定义的<text>元素，实现文字的重用，大家可以记住这种技巧，
使用<use>元素引用<defs>元素中定义的<text>元素，实现文字的重用，大家可以记住这种技巧。第一个<text>元素使用了遮罩效果，第二个<text>元素没有使用遮罩，而是对文字进行了描边，使得文字更加清晰，不会使左侧的文字因为遮罩效果效果与背景色接近从而看不清楚。
-->
