svg 蒙板

SVG支持的蒙板<br />
 SVG支持多种蒙板特效，使用这些特性，我们可以做出很多很炫的效果。至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了，这里都叫做蒙板吧。<br />
SVG支持的蒙板类型：<br />
1. 裁剪路径(cliping path)<br />
裁剪路径是由path,text或者基本图形组成的图形。所有在裁剪路径内的图形都可见，所有在裁剪路径外的图形都不可见。<br />
2. 遮罩/蒙板(mask)<br />
蒙板是一种容器，它定义了一组图形并将它们作为半透明的媒介，可以用来组合前景对象和背景。<br />
裁剪路径和其他的蒙板一个重要的区别就是：裁剪路径是1位蒙板，也就是说裁剪路径覆盖的对象要么就是全透明(可见的，位于裁剪路径内部)，要么就是全不透明(不可见，位于裁剪路径外部)。而蒙板可以指定不同位置的透明度。<br />

视窗的裁剪路径 - overflow和clip属性     <br />
HTML元素的overflow属性和clip属性共同设置了该元素对内容的剪裁行为。同样的，在SVG中，这2个属性还可以使用。<br />
overflow = visible | hidden | scroll | auto | inherit
      overflow属性定义了当元素的内容超过元素的边框的时候采取的行为。<br />
      这个属性可以用于能创建新视窗的元素(svg,symbol,image,foreignObject),pattern和marker元素。这个属性的取值含义如下：<br />
      visible：显示所有内容，即使是内容已经在元素的边框外边，这个是默认值。<br />
      hidden：隐藏超出裁剪路径的内容。裁剪路径由clip属性指定。<br />
      scroll：采用滚动条的形式，呈现超出的内容。<br />
        auto：采用浏览器定义的行为，这个似乎不太可靠。<br />
          1.overflow属性对于除了创建新视窗的元素(svg,symbol,image,foreignObject),pattern和marker元素外的元素都没有效果<br />
        2.裁剪路径与视窗是对应的，创建了新的视窗，就创建了新的裁剪路径。默认的裁剪路径就是视窗边界。
clip = shape | auto | inherit
      clip属性用于设置当前视窗的裁剪路径。<br />
      P { clip: rect(5px, 10px, 10px, 5px); }<br />
      
      对象的裁剪路径 - clipPath元素<br />
      裁剪路径使用clipPath元素定义，然后使用clip-path属性引用。<br />
       clipPath可以包含path元素，text元素，基本的图形元素(circle等)和use元素。如果是use元素，则它必须是直接引用path,text或者基本图形元素，不能引用的是其他的元素。<br />
       
       <svg  xmlns="http://www.w3.org/2000/svg"     version="1.1" >
        <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><br />
       蒙板- mask元素<br />
           在SVG中，你可以为渲染的对象指定任何的图形元素或者g元素作为蒙板，来将渲染对象组合到背景中。
      蒙板用mask元素定义，使用蒙板的时候只需要在对象的mask属性中引用蒙板就可以了。
       mask元素可以包含任何的图形元素和容器元素(例如g)。<br />
       蒙板的效果其实大家也比较清楚，基本就是根据蒙板中每个点的颜色和透明度计算出一个最终的透明度，然后在渲染对象的时候，在对象上面罩上这个带有不同透明度的蒙板层，体现出蒙板的遮挡效果。对于渲染对象来说，只有在蒙版内的部分会按照蒙板上点的透明度来渲染，不在蒙板内的部分不显示。<br />
       <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)" />  
</svg>