svg的裁剪与蒙层

svg元素中有两个可以改变元素显露区域的元素，那就是裁剪元素<clipPath>与蒙层元素<mask>。

1、裁剪元素<clipPath>

这个元素说的是按照一个预设形状去裁剪svg的某个图像，使得该图像只保留裁剪的部分。这个元素只涉及到一个主要属性，就是clipPathUnits，它表示裁剪元素应用的坐标系，且该属性具有两个可能值userSpaceOnUse（默认）、objectBoundingBox，前者表示整个svg使用的坐标系（即以svg的左上角为原点，宽高为x轴和y轴），后者表示应用裁剪元素的图形元素的边框盒形成的坐标系（相当于图形元素边框盒的左上角被视为坐标原点，长宽分别为一个单位长度）。该元素需要绑定一个id，并在需要使用的图形元素上设置clip-path属性然后用url()导入。

以下是裁剪元素的案例：

 案例1，这个是在普通坐标系下的裁剪图片

    <svg width="320" height="320"  xmlns="http://www.w3.org/2000/svg">
      <defs>
        <clipPath id="clipped" clipPathUnits="userSpaceOnUse">
          <path d="M 60,120 A 20 20 0 1 0 60 140 l 80,15 140,-25 -140,-25 -80,15 Z"></path>
        </clipPath>
      </defs>
      <rect x="0" y="60" width="100%" height="150" fill="red"></rect>
      <rect x="0" y="60" width="100%" height="150" fill="#ffffff" clip-path="url(#clipped)"></rect>
    </svg>

 

 案例2，这个是在相对坐标系下的裁剪图片

    <svg width="320" height="320"  xmlns="http://www.w3.org/2000/svg">
      <defs>
        <clipPath id="clipped" clipPathUnits="objectBoundingBox">
          <circle cx="0.4" cy="0.5" r="0.2"></circle>
        </clipPath>
      </defs>
      <rect x="0" y="60" width="100" height="100" fill="red"></rect>
      <rect x="0" y="60" width="100" height="100" fill="#ffffff" clip-path="url(#clipped)"></rect>
    </svg>

2、蒙层元素<mask>

这个元素定义了一个阿尔法（颜色透明度）蒙层，在需要引用的图像元素上通过mask属性配合url()来引用。该元素具有如下重要属性：

• x：表示<mask>元素左上角的x坐标。默认是-10%。
• y：表示<mask>元素左上角的y坐标。默认是-10%。
• width：表示<mask>元素的宽。默认是120%。
• height：表示<mask>元素的高。默认是120%。
• maskContentUnits：表示<mask>元素中的内容的坐标系。具有值userSpaceOnUse（所在的svg的坐标系）和objectBoundingBox（图形元素的边界盒形成的坐标系）。默认是userSpaceOnUse。
• maskUnits：表示<mask>元素的坐标系。具有值userSpaceOnUse（所在的svg的坐标系）和objectBoundingBox（图形元素的边界盒形成的坐标系）。默认是objectBoundingBox。

在该元素内容中设置图形时需要在图形上设置fill属性，当其值设置为white或#ffffff时，该图形所在的区域会使使用蒙层的目标对象完全可见；相反，当其值设置为black或#000000时，则会使目标对象完全不可见。若设置的值介于#000000与#ffffff之间，则会使目标对象变得半透明。本质上，蒙层是对目标对象上的像素点的阿尔法值进行修改，因而它也被称为阿尔法蒙层。

以下是蒙层元素的案例：

案例1，

    <svg width="320" height="320"  xmlns="http://www.w3.org/2000/svg">
      <defs>
        <mask id="mask" 
          maskUnits="objectBoundingBox" 
          maskContentUnits="userSpaceOnUse"
          x="0" y="0" width="100%" height="100%"
        >
          <rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
          <circle cx="100" cy="100" r="60" fill="black"></circle>
        </mask>
      </defs>
      <rect x="40" y="40" width="60" height="60" fill="red"></rect>
      <rect x="100" y="40" width="60" height="60" fill="green"></rect>
      <rect x="40" y="100" width="60" height="60" fill="blue"></rect>
      <rect x="100" y="100" width="60" height="60" fill="orange"></rect>
      <rect x="40" y="40" width="120" height="120" fill="white" mask="url(#mask)"></rect>
    </svg>

 在这个案例中，在四个颜色矩形上盖了一层白色的矩形，它用来遮挡底层的色块。然后在蒙层上先放一个可完全显示使用对象的可见层（它用white或#ffffff来填充），再在其上放一个阻挡使用对象显示的不可见层（它用black或#000000来填充），相当于把白布剪了一个洞，透过洞即可看到布盖着的东西。

案例2，

    <svg width="320" height="320"  xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id="grad">
          <stop offset="0" stop-color="black"></stop>
          <stop offset="100%" stop-color="white"></stop>
        </radialGradient>

        <mask id="mask" 
          maskUnits="objectBoundingBox" 
          maskContentUnits="userSpaceOnUse"
          x="0" y="0" width="100%" height="100%"
        >
          <rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
          <circle cx="100" cy="100" r="60" fill="url(#grad)"></circle>
        </mask>
      </defs>

      <rect x="40" y="40" width="60" height="60" fill="red"></rect>
      <rect x="100" y="40" width="60" height="60" fill="green"></rect>
      <rect x="40" y="100" width="60" height="60" fill="blue"></rect>
      <rect x="100" y="100" width="60" height="60" fill="orange"></rect>
      <rect x="40" y="40" width="120" height="120" fill="white" mask="url(#mask)"></rect>
    </svg>

该案例中，把蒙层中的圆形区域的fill设置为渐变色，使蒙层的作用对象白色区域从中心开始变得逐渐可见（相当于下方的遮盖物逐渐不可见）。