SVG 的裁剪和蒙版如何使用 - 面试题

SVG 裁剪和蒙版是创建复杂图形效果的重要工具。以下是 SVG 裁剪和蒙版的使用方法：

1. 裁剪路径（clipPath） 使用 <clipPath> 元素定义裁剪区域，只有裁剪区域内的内容才会显示。

svg
<svg width="200" height="200">
  <defs>
    <clipPath id="myClip">
      <circle cx="100" cy="100" r="80" />
    </clipPath>
  </defs>
  
  <rect x="0" y="0" width="200" height="200" fill="blue" clip-path="url(#myClip)" />
</svg>

2. 裁剪路径示例 使用不同形状作为裁剪路径。

svg
<svg width="300" height="200">
  <defs>
    <clipPath id="circleClip">
      <circle cx="100" cy="100" r="80" />
    </clipPath>
    
    <clipPath id="rectClip">
      <rect x="20" y="20" width="160" height="160" rx="20" />
    </clipPath>
    
    <clipPath id="starClip">
      <polygon points="100,10 40,198 190,78 10,78 160,198" />
    </clipPath>
  </defs>
  
  <rect x="0" y="0" width="200" height="200" fill="blue" clip-path="url(#circleClip)" />
  <rect x="200" y="0" width="200" height="200" fill="green" clip-path="url(#rectClip)" />
  <rect x="400" y="0" width="200" height="200" fill="red" clip-path="url(#starClip)" />
</svg>

3. 蒙版（mask） 使用 <mask> 元素创建蒙版效果，蒙版的透明度决定内容的显示程度。

svg
<svg width="200" height="200">
  <defs>
    <mask id="myMask">
      <rect x="0" y="0" width="200" height="200" fill="white" />
      <circle cx="100" cy="100" r="50" fill="black" />
    </mask>
  </defs>
  
  <rect x="0" y="0" width="200" height="200" fill="blue" mask="url(#myMask)" />
</svg>

4. 蒙版透明度 使用不同的透明度创建渐变蒙版效果。

svg
<svg width="200" height="200">
  <defs>
    <linearGradient id="maskGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="black" />
    </linearGradient>
    
    <mask id="fadeMask">
      <rect x="0" y="0" width="200" height="200" fill="url(#maskGradient)" />
    </mask>
  </defs>
  
  <rect x="0" y="0" width="200" height="200" fill="blue" mask="url(#fadeMask)" />
</svg>

5. 裁剪与蒙版的区别

裁剪（clipPath）：只显示裁剪区域内的内容，区域外完全隐藏
蒙版（mask）：根据蒙版的透明度控制内容的显示程度，可以创建渐变效果

6. 组合使用 结合裁剪和蒙版创建复杂效果。

svg
<svg width="200" height="200">
  <defs>
    <clipPath id="circleClip">
      <circle cx="100" cy="100" r="80" />
    </clipPath>
    
    <mask id="fadeMask">
      <rect x="0" y="0" width="200" height="200" fill="url(#maskGradient)" />
    </mask>
    
    <linearGradient id="maskGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="black" />
    </linearGradient>
  </defs>
  
  <rect x="0" y="0" width="200" height="200" fill="blue" 
        clip-path="url(#circleClip)" mask="url(#fadeMask)" />
</svg>

7. 动态裁剪 使用 JavaScript 动态修改裁剪路径。

svg
<svg width="200" height="200">
  <defs>
    <clipPath id="dynamicClip">
      <circle id="clipCircle" cx="100" cy="100" r="50" />
    </clipPath>
  </defs>
  
  <rect id="clippedRect" x="0" y="0" width="200" height="200" fill="blue" 
        clip-path="url(#dynamicClip)" />
</svg>

<script>
const clipCircle = document.getElementById('clipCircle');
let radius = 50;
let growing = true;

function animateClip() {
  if (growing) {
    radius += 1;
    if (radius >= 80) growing = false;
  } else {
    radius -= 1;
    if (radius <= 50) growing = true;
  }
  
  clipCircle.setAttribute('r', radius);
  requestAnimationFrame(animateClip);
}
animateClip();
</script>

8. 文本裁剪 使用文本作为裁剪路径。

svg
<svg width="300" height="200">
  <defs>
    <clipPath id="textClip">
      <text x="150" y="100" font-size="48" font-weight="bold" text-anchor="middle">
        SVG
      </text>
    </clipPath>
  </defs>
  
  <rect x="0" y="0" width="300" height="200" fill="url(#gradient)" clip-path="url(#textClip)" />
  
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff6b6b" />
      <stop offset="100%" stop-color="#4ecdc4" />
    </linearGradient>
  </defs>
</svg>

9. 图片裁剪 使用 SVG 裁剪外部图片。

svg
<svg width="200" height="200">
  <defs>
    <clipPath id="imageClip">
      <circle cx="100" cy="100" r="80" />
    </clipPath>
  </defs>
  
  <image href="photo.jpg" x="0" y="0" width="200" height="200" 
         clip-path="url(#imageClip)" />
</svg>

最佳实践：

合理选择裁剪或蒙版，根据需求决定
使用裁剪实现简单的形状裁剪
使用蒙版实现渐变和透明度效果
考虑性能，避免过度使用复杂裁剪
测试跨浏览器兼容性
为裁剪和蒙版添加有意义的 ID