Tuto SVG 10 - Clipping et masking

Public visé: dev lambda.

Objectif

• Découper ou masquer une forme.

Références W3C

• SVG 2 - Masking: https://www.w3.org/TR/SVG2/masking.html

Exemple

<svg xmlns="http://www.w3.org/2000/svg" width="220" height="120" viewBox="0 0 220 120">
  <defs>
    <clipPath id="clip">
      <circle cx="60" cy="60" r="40"/>
    </clipPath>
    <mask id="fade">
      <rect width="220" height="120" fill="white"/>
      <rect x="110" y="0" width="110" height="120" fill="black"/>
    </mask>
  </defs>
  <rect width="220" height="120" fill="#f2c94c"/>
  <rect width="220" height="120" fill="#3a6ea5" clip-path="url(#clip)"/>
  <rect width="220" height="120" fill="#0f2d40" mask="url(#fade)"/>
</svg>

tutos-svg-10-clipping-masking.svg

À retenir

• clipPath coupe selon une forme géométrique.
• mask utilise des niveaux de gris pour gérer la transparence.
• Masques et clips peuvent être réutilisés via defs.

Exercice

• Remplace le circle du clipPath par un polygon.