svg蒙版mask

无障碍的使用蒙版的前提。

1. svg的图层是按代码顺序先的处于底层。后出现的处于表层。表层会遮盖底层。
2. 蒙版相当于白名单机制与黑名单机制。白名单就是默认不透明，只允许我的形状覆盖的区域(fill=(white))。黑名单就是默认透明,我的形状覆盖的区域则是不透明(fill="black")。

实例:对图片只显示某个区域。用白名单机制把想要显示的区域框出来。

  <svg xmlns="http://www.w3.org/2000/svg" :view-box.camel="viewbox">
      <defs>
          <mask id="small-rect">
              <!--图形白名单(只显示形状内的内容)-->
              <circle r='50' cx='50' cy='50' fill="white"/>
          </mask>
      </defs>
      <g>
          <!--对图形添加白名单效果-->
          <image mask="url(#small-rect)" y="0" x="0" height="100" width="100" xlink:href="https://www.baidu.com/img/bd_logo1.png"/>
          <!--给图标加个边框,不是必须,只是为了显示明显点-->
          <circle r='50' cx='50' cy='50' class="circle"/>
          <text x='0' y='120'>gcolo</text>
      </g>
  </svg>