How to use SVG clipping and masking - 面试题

SVG clipping and masking are important tools for creating complex graphic effects. Here are the usage methods for SVG clipping and masking:

1. Clipping Path (clipPath) Use the <clipPath> element to define a clipping area; only content within the clipping area will be displayed.

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. Clipping Path Examples Use different shapes as clipping paths.

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. Masking (mask) Use the <mask> element to create masking effects; the mask's opacity determines the display degree of the content.

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. Mask Opacity Use different opacities to create gradient masking effects.

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. Difference Between Clipping and Masking

Clipping (clipPath): Only displays content within the clipping area, completely hides content outside the area
Masking (mask): Controls the display degree of content based on the mask's opacity, can create gradient effects

6. Combined Usage Combine clipping and masking to create complex effects.

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. Dynamic Clipping Use JavaScript to dynamically modify clipping paths.

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. Text Clipping Use text as a clipping path.

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. Image Clipping Use SVG to clip external images.

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>

Best Practices:

Reasonably choose clipping or masking based on requirements
Use clipping for simple shape clipping
Use masking for gradient and opacity effects
Consider performance, avoid overusing complex clipping
Test cross-browser compatibility
Add meaningful IDs for clipping and masking