x
 
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>mask-image 属性</h1>
<h3>带有遮罩层的图像(SVG 图像):</h3>
<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon> <!-- 白色填充的多边形 -->
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/i/photo/beijing.jpg" mask="url(#svgmask1)"></image> <!-- 应用遮罩的图像 -->
</svg>
<h3>原始图像:</h3>
<img src="/i/photo/beijing.jpg" alt="北京" width="600" height="400">
</body>
</html>