Effacer une partie de ce que l'on a créé précédemment peut paraître maladroit, voire totalement contradictoire. Mais cela peut se révéler très utile, par exemple quand vous essayez de dessiner un demi-cercle.
Le découpage correspond au fait d'enlever des morceaux d'élément. Dans ce cas là, les effets de transparence ne sont pas permis, il s'agit d'une approche du tout-ou-rien.
D'un autre côté, le masquage permet plus de souplesse en prenant en compte la transparence et les niveaux de gris.
Découper
Pour créer un demi-cercle, on définit d'abord un élément circle.
<defs>
<clipPath id="cut-off-bottom">
<rect x="0" y="0" width="200" height="100" />
</clipPath>
</defs>
<circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
On dessine ici un cercle d'un rayon de 100 pixels, dont le centre est placé au point (100,100). L'attribut clip-path fait référence à l'élément clipPath défini plus haut avec un seul rectangle. Ce simple rectangle va dessiner et remplir en noir la moitié supérieur du cercle, celle qui rentre dans son "espace". Il est à noter que l'élément clipPath est placé dans la section defs.
L'intégralité du rectangle ne va pas être dessiné. Au lieu de cela, ce rectangle va déterminer les pixels qui seront "rendus" dans le dessin final, c'est à dire ceux qui sont dans le cercle et dans le rectangle défini par l'élément de découpe. Ainsi, la moitié inférieur du cercle va disparaître :
