Détourage, masque et composition

Windows Internet Explorer 9 prend désormais en charge le découpage SVG, les tracés de détourage, les masques et l’opacité comme indiqué dans Clipping, Masking, and Compositing module de la spécification SVG 1.1 (Deuxième édition). (Les chemins SVG sont décrits dans la section Chemins de ce document.)

Découpage

Un tracé de détourage découpe la zone dans laquelle une couleur, un motif ou une image peut être dessiné. Toutes les parties de l’élément graphique qui se trouvent en dehors du tracé ne sont pas dessinées. Les tracés de détourage sont totalement opaques ; la partie de l’élément graphique qui se trouve en dehors du tracé est complètement invisible.

Dans SVG, les propriétés overflow et clip établissent des tracés de détourage d’origine, ou les formes dans lesquelles le contenu sera affiché. Par défaut, le tracé de détourage initial est défini en tant que fenêtre d’affichage SVG ou la zone rectangulaire de la page où le contenu SVG est affiché.

L’élément clipPath définit un tracé de détourage. Il est ensuite fait référence au tracé de détourage à l’aide de la propriété clip-path. La propriété clip-rule s’applique aux éléments graphiques au sein d’un élément clipPath et l’attribut clipPathUnits définit un système de coordonnées pour le contenu de clipPath. Les tracés de détourage peuvent être appliqués à du texte, des couleurs, des motifs et des images.

La fonctionnalité de détourage est accessible par programme avec l’interface DOM SVGClipPathElement.

Vous trouverez ci-dessous un exemple simple de tracé de détourage SVG.


<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="100">
 <clipPath id="clip1">
    <circle id="clipShape" cx="60" cy="60" r="50" />
 </clipPath>
 <rect x="20" y="20" width="100" height="100" fill="blue"
    clip-path="url(#clip1)" />
 </svg>

Cet exemple utilise l’élément clipPath pour définir un tracé de détourage en forme de cercle. La propriété clip-path est ensuite utilisée pour appliquer le tracé de détourage à un rectangle. Le résultat est le suivant dans Internet Explorer 9.

Image du rectangle détouré selon un tracé de détourage circulaire

Masques

Un masque est identique à un tracé de détourage, sauf qu’il est semi-transparent. Les masques sont souvent utilisés pour la composition d’objets de premier plan dans l’arrière-plan actuel.

L’élément mask définit un masque. Il est ensuite fait référence au masque à l’aide de la propriété mask.

Vous trouverez ci-dessous un exemple simple de masque SVG.


<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg width="4cm" height="4cm" viewBox="0 0 800 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example mask01 - three different colored circles used to mask the color of a rectangle
  </desc>
     <defs>
     <g id="circles">
            <g stroke="white" stroke-width="2" >
                <circle cx="100" cy="50" r="50" fill="rgb(255,0,0)" />
                <circle cx="50" cy="135" r="50" fill="rgb(0,255,0)" />
                <circle cx="150" cy="135" r="50" fill="rgb(0,0,255)" />
            </g>
        </g>       
        <mask id="myMask" >
            <use xlink:href="#circles" />
        </mask>
     </defs>
     <rect x="0" y="0" width="100%" height="100%" fill="purple"
          mask="url(#myMask)" />
 </svg>

Cet exemple utilise la propriété mask pour définir un masque sous la forme de trois cercles adjacents de différentes couleurs. La propriété mask est ensuite utilisée pour appliquer le masque à un rectangle violet. Le résultat est le suivant dans Internet Explorer 9.

Trois cercles adjacents dans une configuration triangulaire

Rubriques connexes

SVG

 

 

Afficher:
© 2014 Microsoft