SVG元素使用内联mask元素的遮罩效果实例页面

展示

代码

• HTML：

  <svg style="position: absolute; width: 0; height: 0;"> 
      <mask id="mask" maskContentUnits="objectBoundingBox">
          <ellipse cx=".5" cy=".5" rx=".4" ry=".2" fill="white"></ellipse>
          <rect x=".3" y=".1" width=".4" height=".8" rx=".1" ry=".1" fill="white"></rect>
      </mask>  
  </svg>
  
  <svg width="256" height="192">
      <image xlink:href="1.jpg" class="mask-image" width="256" height="192"></image>
  </svg>

• CSS：

  .mask-image {
      mask: url(#mask);
      mask-image: url(#mask);
  }