--- layout: layouts/page.njk title: Découpe et masquage --- ## Découpage Le découpage (clipping) agit comme un pochoir. les éléments sont découpés par les bords de la forme. L'élement clipPath est défini à l'intérieur d'une zone de définition. Il contient le tracé personalisé de ce qui va servir à découper. ```svg ``` Pour découper une illustration il faut faire référence à la définition du clipPath ```svg ``` ## Découpages simples Lorsque le découpage est une forme simple il est possible d'utiliser des raccourcis. ### Rectangle intérieur `inset` défini les marges enhaut à droite, en bas et à gauche d'un rectangle. Les marges sont exprimés en px ou en pourcentage. ```svg ``` ### Cercle ```svg ``` ### Ellipse ```svg ``` ### Polygone ```svg ``` ### Chemin ```svg ``` [https://bennettfeely.com/clippy/](https://bennettfeely.com/clippy/) ## Masquage Le masquage permet des effets plus fins. Les élements apparaissent progressivement en transparence suivant l'intensité de noir ou blanc de la forme. L'intérêt du masquage est d'utiliser des dégradés. ```svg ``` Comme le découpage il faut faire référnce à la définition du masque ```svg ```