Découpages et masquages

Pour créer un demi-cercle, on définit d'abord un élément circle:

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <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)" />
</svg>

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éfinit plus haut, qui est généralement placé dans la section defs.

L'élément clipPath contient un simple rectangle qui, seul, remplirait en noir la moitié supérieur du canvas. Le rectangle ne sera pas dessiné, parce qu'il est définit dans un élément clipPath, il a pour effet de déterminer quels pixels seront affichés ou non dans le dessin final. Le rectangle ne couvrant que la partie supérieure du cercle, la partie inférieure du cercle ne sera pas affichée:

Screenshot	Live sample

Nous avons maintenant un demi-cercle, sans avoir à passer par un arc dans un élément path. Pour le découpage, chaque forme à l'intérieur de clipPath est inspecté et évalué avec ses propriétés et ses transformations. Chaque zone transparente dans clipPath aura pour effet de masquer le contenu. La couleur, l'opacité et autres n'ont pas d'effet tant qu'ils ne rendent pas les formes complètement transparentes.

Le masquage, contrairement au découpage permet de travailler avec des gradients. Si vous voulez qu'un élément disparaisse progressivement, vous y parviendrez en utiilisant des masques.

<svg
  width="200"
  height="200"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="Gradient">
      <stop offset="0" stop-color="white" stop-opacity="0" />
      <stop offset="1" stop-color="white" stop-opacity="1" />
    </linearGradient>
    <mask id="Mask">
      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
    </mask>
  </defs>

  <rect x="0" y="0" width="200" height="200" fill="green" />
  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
</svg>

Vous pouvez voir qu'on a définit un rectangle vert en-dessous d'un rectangle rouge. Ce dernier a un attribut mask qui pointe vers le masque situé dans les définitions. Le contenu du masque est un simple élément rect, qui est rempli d'un gradient transparent-vers-blanc. Les pixels du rectangle rouge héritent de la valeur alpha (la transparence) du contenu du masque, si bien que le rectangle rouge est progressivement masqué et laisse voir le rectangle vert en-dessous:

Screenshot	Live sample

Pour définir la transparence d'un élément entier, on peut utiliser l'attribut opacity:

<rect x="0" y="0" width="100" height="100" opacity=".5" />

Le rectangle ci-dessus sera dessiné semi-transparent.

On peut également utiliser deux attributs distincts pour le remplissage et le contour: fill-opacity et stroke-opacity, pour contrôler l'opacité des propriétés fill et stroke respecitvement. Notez que le contour est dessiné au-dessus du remplissage. Ainsi, si vous rendez le contour semi-transparent et non le remplissage, celui-ci sera visible à travers le contour:

<svg
  width="200"
  height="200"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" width="200" height="200" fill="blue" />
  <circle
    cx="100"
    cy="100"
    r="50"
    stroke="yellow"
    stroke-width="40"
    stroke-opacity=".5"
    fill="red" />
</svg>

Screenshot	Live sample

Vous pouvez voir dans cet exemple un cercle rouge sur un fond bleu. Le contour jaune a une opacité de 50%, si bien qu'on se retrouve avec une partie du remplissage en orange.

Un des outils les plus puissants parmis l'arsenal du développeur web est display: none. Il n'est donc pas étonnant qu'il ait été décidé que cette propriété CSS serait également intégrée à SVG, de même que visibility et clip définis en CSS 2. Pour ré-afficher un élément précédemment caché avec display: none il est important de savoir que la valeur initiale des éléments SVG est inline.

• Précédent
• Suivant