mozilla
Vos résultats de recherche

    Découpages et masquages

    Page en cours de rédaction !!!

    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 essayer 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éjà un élément circle.

    <clipPath id="cut-off-bottom">
      <rect x="0" y="0" width="200" height="100" />
    </clipPath>
    
    <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 :

    clipdemo.png

     

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: teoli, GiulianT
    Dernière mise à jour par : teoli,