14 Le rognage, le masquage et la composition

Contenu

• 14.1 Introduction
• 14.2 La composition alpha simple
• 14.3 Les tracés de rognage
  • 14.3.1 Introduction
  • 14.3.2 Le tracé de rognage initial
  • 14.3.3 Les propriétés 'overflow' et 'clip'
  • 14.3.4 Le rognage par la zone de visualisation comparé au rognage par l'attribut viewBox
  • 14.3.5 L'établissement d'un nouveau tracé de rognage
• 14.4 Le masquage
• 14.5 L'opacité de l'objet et du groupe : la propriété 'opacity'
• 14.6 Les interfaces du DOM

14.1 Introduction

SVG gère les fonctions de rognage et de masquage suivantes :

• les tracés de rognage, qui utilisent toute combinaison d'éléments 'path', 'text' et de formes de base pour servir de contour d'un masque 1-bit (en l'absence d'anti-crénelage), où tout ce qui se trouve « à l'intérieur » du contour peut être vu mais tout ce qui se trouve en dehors est masqué ;
• les masques, qui sont des éléments conteneurs pouvant contenir des éléments graphiques, ou d'autres éléments conteneurs, qui définissent un jeu de graphiques devant être utilisé comme masque semi-transparent pour la composition des objets de premier-plan dans l'arrière-plan courant.

Ce qui distingue principalement les tracés de rognage des masques, c'est que le tracé de rognage est un masque fort (i.e., la silhouette consiste soit en pixels totalement opaques, soit totalement transparents, une exception éventuelle étant un anti-crénelage au long du bord de la silhouette) alors que le masque consiste en une image où chaque valeur de pixel indique une variation entre transparence et opacité. Dans un masque, chaque valeur de pixel peut varier de totalement transparent à totalement opaque.

SVG ne gère que la composition avec un mélange alpha simple ( voir la section La composition alpha simple).

14.2 La composition alpha simple

Les éléments graphiques sont fondus avec ceux déjà rendus sur le canevas en utilisant une composition alpha simple, dans laquelle la couleur et l'opacité résultantes, pour chaque pixel donné sur le canevas, sont obtenues selon les formules suivantes (toutes les valeurs de couleur utilisent une valeur alpha pré-multipliée) :

Er, Eg, Eb    - Valeur de couleur de l'élément
Ea            - Valeur alpha de l'élément
Cr, Cg, Cb    - Valeur de couleur du canevas (avant mélange)
Ca            - Valeur alpha du canevas (avant mélange)
Cr', Cg', Cb' - Valeur de couleur du canevas (après mélange)
Ca'           - Valeur alpha du canevas (après mélange)
Ca' = 1 - (1 - Ea) * (1 - Ca)
Cr' = (1 - Ea) * Cr + Er
Cg' = (1 - Ea) * Cg + Eg
Cb' = (1 - Ea) * Cb + Eb

Les propriétés de rendu suivantes, qui fournissent des informations sur l'espace de couleur dans lequel les opérations de composition s'effectuent, s'appliquent aux opérations de composition :

• la propriété 'color-interpolation'
• la propriété 'color-rendering'

14.3 Les tracés de rognage

14.3.1 Introduction

Le tracé de rognage restreint la région sur laquelle une peinture peut s'appliquer. Conceptuellement, toutes les parties du dessin, qui tombent en-dehors de la région délimitée par le tracé de rognage en vigueur, ne sont pas dessinées. On peut assimiler un tracé de rognage à un masque dont ceux des pixels en-dehors du tracé sont noirs avec une valeur alpha de zéro et ceux à l'intérieur sont blancs avec une valeur alpha de un (en exceptant un anti-crénelage éventuel sur le bord de la silhouette).

14.3.2 Le tracé de rognage initial

Quand un élément 'svg' est l'élément racine du document ou bien est incorporé dans un document dont la disposition est déterminée en fonction des règles de disposition de CSS ou de XSL, alors l'agent utilisateur doit établir un tracé de rognage initial pour le fragment de document SVG. Les propriétés 'overflow' et 'clip', en même temps que les règles de traitement supplémentaires de l'agent utilisateur SVG, déterminent le tracé de rognage initial que l'agent utilisateur établit pour le fragment de document SVG.

14.3.3 Les propriétés 'overflow' et 'clip'

La propriété 'overflow' a les mêmes valeurs de paramètre et la même signification que dans la définition [CSS2-overflow vf.] ; cependant s'y rajoutent les points suivants :

• la propriété 'overflow' s'applique aux éléments qui établissent une nouvelle zone de visualisation (par exemple, l'élément 'svg') ainsi qu'aux éléments 'pattern' et 'marker' elements. Pour tous les autres éléments, elle n'a aucun effet (i.e., aucun rectangle de rognage n'est créé) ;
• Pour ceux des éléments concernés par la propriété 'overflow', si la propriété 'overflow' a pour valeur hidden, ou scroll, un nouveau tracé de rognage de forme rectangulaire est créé. Ceci équivaut à définir un élément 'clipPath', dont le contenu est un élément 'rect', celui-ci définissant le rectangle correspondant, puis à spécifier la valeur <uri>, pour cet élément 'clipPath', sur la propriété 'clip-path' de l'élément en question ;
• Si la propriété 'overflow' a une valeur autre que hidden ou scroll, elle n'a aucun effet (i.e., aucun rectangle de rognage n'est créé) ;
• Dans un contenu SVG, la valeur auto équivaut à la valeur visible ;
• Pour un élément 'svg', le plus externe, incorporé en ligne dans une grammaire XML parente qui utilise une disposition CSS [CSS2-LAYOUT vf.] ou une mise en forme XSL [XSL vf.], si la valeur de la propriété 'overflow' est hidden, ou scroll, alors l'agent utilisateur va établir un tracé de rognage initial correspondant aux limites de la zone de visualisation initiale ; sinon, le tracé de rognage initiale s'établit en fonction des règles de rognage définies dans [CSS2-overflow vf.] ;
• Pour un élément SVG 'svg' le plus externe, autonome ou bien incorporé en ligne dans une grammaire XML parente qui n'utilise pas une disposition CSS [CSS2-LAYOUT vf.] ou une mise en forme XSL [XSL vf.], alors la propriété 'overflow' sur l'élément 'svg' le plus externe est ignorée pour le rendu visuel et le tracé de rognage initial s'établit sur les limites de la zone de visualisation initiale ;
• La propriété 'overflow', tel que définie dans [CSS2-overflow vf.], a pour valeur initiale "visible" ; cependant, la feuille de style de l'agent utilisateur SVG surclasse cette valeur initiale de la propriété 'overflow' par la valeur "hidden" sur les éléments qui établissent une nouvelle zone de visualisation (par exemple, l'élément 'svg') ainsi que sur les éléments 'pattern' et 'marker'.

En réunissant ce qui précède, le comportement par défaut des agents utilisateurs SVG est d'établir un tracé de rognage aux limites de la zone de visualisation initiale et d'établir un nouveau tracé de rognage pour chacun des éléments qui établissent une nouvelle zone de visualisation et chacun des éléments 'pattern' et 'marker'.

Pour une information en relation, voir la section Le rognage par la zone de visualisation comparé au rognage par l'attribut viewBox.

La propriété 'clip' admet les mêmes valeurs de paramètre que celles définies dans [CSS2-clip vf.]. Les valeurs sans unité, qui indiquent des coordonné utilisateur courantes, sont admises en valeurs de coordonnées de <forme>. La valeur "auto" définit un tracé de rognage sur les limites de la zone de visualisation créé par l'élément donné.

14.3.4 Le rognage par la zone de visualisation comparé au rognage par l'attribut viewBox

Il est important de remarquer que les valeurs initiales des propriétés 'overflow' et 'clip' et de la feuille de style de l'agent utilisateur vont produire un tracé de rognage initial sur les limites de la zone de visualisation initiale. Quand les attributs viewBox et preserveAspectRatio sont spécifiés, il est parfois souhaitable que le tracé de rognage soit établi aux limites indiquées par l'attribut viewBox plutôt qu'à celles de la zone de visualisation (ou à celles du rectangle de référence, dans les cas des éléments 'marker' et 'pattern'), notamment quand l'attribut preserveAspectRatio spécifie un changement d'échelle uniforme et quand le ratio d'aspect indiqué par l'attribut viewBox ne correspond pas avec celui de la zone de visualisation.

Pour établir le tracé de rognage initial aux limites définies par l'attribut viewBox, établir les limites de la propriété 'clip' au même rectangle que celui spécifié par l'attribut viewBox. (Remarquer que les paramètres ne correspondent pas. La propriété 'clip' admet comme valeurs <haut>, <droite>, <bas> et <gauche>, alors que l'attribut viewBox admet comme valeurs <min-x>, <min-y>, <largeur> et <hauteur>).

14.3.5 L'établissement d'un nouveau tracé de rognage

On définit un tracé de rognage avec un élément 'clipPath'. On emploie/appelle un tracé de rognage avec la propriété 'clip-path'.

Un élément 'clipPath' peut contenir des éléments 'path' et 'text', des formes de base (tel qu'un élément 'circle') ou un élément 'use'. Quand un élément 'use' est un enfant d'un élément 'clipPath', il doit référencer directement les éléments 'path', 'text' ou les formes de base. Une référence indirecte provoque une erreur (voir Le traitement des erreurs).

La géométrie brute de chaque élément enfant, en excluant les propriétés de rendu telles que 'fill', 'stroke' et 'stroke-width' dans un élément 'clipPath', définit conceptuellement un masque 1-bit (sauf éventuellement pour un anti-crénelage des bords de la figure géométrique) qui correspond à la silhouette du graphique associé à cet élément. Tout ce qui se trouve en-dehors du contour de l'objet est masqué. Quand l'élément 'clipPath' contient plusieurs éléments enfants, leurs silhouettes se conjuguent, à la manière d'un OU logique, pour n'en créer qu'une seule, qui servira alors à délimiter la région sur laquelle la peinture peut s'appliquer. Ainsi, un point se trouve à l'intérieur du tracé de rognage s'il est à l'intérieur d'un des enfants de l'élément 'clipPath'.

Une erreur survient si la propriété 'clip-path' appelle un objet non existant ou si l'objet appelé n'est pas un élément 'clipPath' (voir Le traitement des erreurs).

Pour un élément graphique donné, le tracé de rognage effectivement utilisé correspondra à l'intersection du tracé de rognage spécifié par sa propriété 'clip-path' (éventuellement et de tout tracé de rognage sur ses ancêtres, comme spécifié par la propriété 'clip-path' sur les éléments ancêtres ou par la propriété 'overflow' sur les éléments ancêtres qui établissent une nouvelle zone de viusualisation. (Voir également le passage traitant du tracé de rognage initial).

Quelques remarques :

• L'élément 'clipPath' lui-même et ses éléments enfants n'héritent pas des tracés de rognage des ancêtres de l'élément 'clipPath' ;
• L'élément 'clipPath' ou l'un de ses enfants peuvent spécifier une propriété 'clip-path'.
  Si une référence de propriété 'clip-path' valide est placée sur un élément 'clipPath', le tracé de rognage résultant correspond à l'intersection du contenu de l'élément 'clipPath' et du tracé de rognage appelé.
  Si une référence de propriété 'clip-path' valide est placée sur un des enfants d'un élément 'clipPath', alors l'élément enfant en question est rogné selon le tracé de rognage appelé, avant la conjugaison (OU logique) de la silhouette de l'élément enfant avec celles des autres éléments enfants.

<!ENTITY % clipPathExt "" >
<!ELEMENT clipPath (%descTitleMetadata;,
                    (path|text|rect|circle|ellipse|line|polyline|polygon|
                     use|animate|set|animateMotion|animateColor|animateTransform
                     %ceExt;%clipPathExt;)*) >
<!ATTLIST clipPath
  %stdAttrs;
  %testAttrs;
  %langSpaceAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-Color;
  %PresentationAttributes-FillStroke;
  %PresentationAttributes-FontSpecification;
  %PresentationAttributes-Graphics;
  %PresentationAttributes-TextContentElements;
  %PresentationAttributes-TextElements;
  transform %TransformList; #IMPLIED
  clipPathUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED >

Les propriétés dans l'élément 'clipPath' héritent des ancêtres de celui-ci ; les propriétés n'héritent pas de l'élément qui appelle l'élément 'clipPath'.

Les éléments 'clipPath' ne sont jamais rendus directement ; leur seule utilisation est comme quelque chose qu'on appelle en utilisant la propriété 'clip-path'. La propriété 'display' ne s'appliquent pas aux éléments 'clipPath' ; ainsi, les éléments 'clipPath' ne sont pas rendus directement, même si la propriété 'display' a une valeur autre que none, et ils peuvent être appelés, même si la propriété 'display', sur l'élément 'clipPath' ou l'un de ses ancêtres, a une valeur de none.

<uri>

Une référence d'URI vers un autre objet graphique, dans le même fragment de document SVG, qui sera utilisé comme tracé de rognage.

nonzero

Voir la description de la propriété 'fill-rule'.

evenodd

Voir la description de la propriété 'fill-rule'.

La propriété 'clip-rule' ne s'appliquent qu'aux éléments contenus dans un élément 'clipPath'. Le fragment de code suivant va entraîner l'application d'une règle de rognage "evenodd" sur le tracé de rognage, parce que la propriété 'clip-rule' est spécifiée sur l'élément 'path' qui définit la forme du rognage :

<g clip-rule="nonzero">
  <clipPath id="MonRognage">
    <path d="..." clip-rule="evenodd" />
  </clipPath>
  <rect clip-path="url(#MonRognage)" ... />
</g>

alors que le fragment d'après n'entraînera pas l'application d'une règle de rognage "evenodd", parce que la propriété 'clip-rule' est spécifiée sur l'élément appelant, et non pas sur l'objet qui définit la forme du rognage :

<g clip-rule="nonzero">
  <clipPath id="MonRognage">
    <path d="..." />
  </clipPath>
  <rect clip-path="url(#MonRognage)" clip-rule="evenodd" ... />
</g>

14.4 Le masquage

En SVG, on peut spécifier l'utilisation de n'importe quel objet graphique ou élément 'g' comme masque alpha pour la composition de l'objet courant avec l'arrière-plan.

On définit un masque avec un élément 'mask'. On emploie/appelle un masque avec la propriété 'mask'.

Un élément 'mask' peut contenir tout élément graphique ou élément conteneur, comme un élément 'g'.

Une erreur survient si la propriété 'mask' référence un objet non existant ou si l'objet appelé n'est pas un élément 'mask' (voir Le traitement des erreurs).

L'effet produit est comme si les enfants de l'élément 'mask' étaient rendus dans une image hors-écran initialisée au noir transparent. Tout objet graphique qui emploie/appelle l'élément 'mask' donné sera peint sur l'arrière-plan au travers du masque, masquant ainsi tout ou partie de l'objet graphique.

Pour tout objet graphique utilisé comme masque, la valeur de masque en chaque point est calculée à partir des valeurs du canal de couleur et du canal alpha comme suit. Une valeur de luminance linéaire est calculée à partir des valeurs des canaux de couleur. Ceci peut être accompli, par exemple, en convertissant d'abord les valeurs de couleur de l'image originale (potentiellement dans l'espace de couleur sRGB) vers l'espace de couleur linéaire RGB (voir Les propriétés de rendu). Puis, en utilisant les valeurs de couleur RGB linéaires non prémultipliées, appliquer les coefficients luminance-vers-alpha (comme définis dans la primitive de filtre 'feColorMatrix', pour convertir les valeurs de couleur RGB linéaires vers les valeurs de luminance linéaires. Si l'objet graphique contient aussi un canal alpha, alors la valeur de luminance linéaire calculée est multipliée par la valeur alpha correspondante pour obtenir la valeur de masque.

Pour un objet graphique en quatre canaux RGBA utilisé comme masque, les canaux couleurs et le canal alpha contribuent tous deux à l'opération de masquage. Le masque alpha, utilisé pour composer l'objet courant avec l'arrière-plan, représente le produit de la luminance des canaux de couleur (voir paragraphe précédent) et du canal alpha du masque.

Pour un objet graphique en trois canaux RGB utilisé comme masque (par exemple, lors de l'appel d'un fichier image en trois canaux), l'effet produit est comme si l'objet était converti en une image RGBA en quatre canaux avec un canal alpha fixé uniformément à 1.

Pour une image mono-canal utilisée comme masque (par exemple, l'appel d'un fichier image en niveaux de gris mono-canal), l'effet produit est comme si l'objet était converti en une image en quatre canaux RGBA, où le seul canal de l'objet appelé est utilisé pour le calcul des trois canaux de couleur et le canal alpha est uniformément fixé à 1. Remarquer que, quand on appele un fichier image en niveaux de gris, la courbe de transfert, pour la correspondance entre les valeurs en niveaux de gris encodées et les valeurs linéaires de lumière, doit être prise en compte lors du calcul des canaux de couleur.

L'effet produit par un masque est identique à celui obtenu s'il n'y avait aucun masque, comme si le canal alpha de l'objet donné était multiplié avec les valeurs alpha résultantes du masque (i.e., le produit de la luminance du masque, issue des canaux de couleur multipliés par le canal alpha du masque).

Remarquer que les éléments SVG, 'path', les formes (par exemple, 'circle') et 'text', sont tous considérés comme des images RGBA en quatre canaux pour les opération de masquage.

L'exemple Masque01 fait appel à une image pour masquer un rectangle.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="8cm" height="3cm" viewBox="0 0 800 300"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Exemple Masque01 - un texte en bleu masqué par un dégradé sur un fond rouge
  </desc>
  <defs>
    <linearGradient id="Degrade" gradientUnits="userSpaceOnUse"
                    x1="0" y1="0" x2="800" y2="0">
      <stop offset="0" stop-color="white" stop-opacity="0" />
      <stop offset="1" stop-color="white" stop-opacity="1" />
    </linearGradient>
    <mask id="Masque" maskUnits="userSpaceOnUse"
          x="0" y="0" width="800" height="300">
      <rect x="0" y="0" width="800" height="300" fill="url(#Degrade)"  />
    </mask>
    <text id="Text" x="400" y="200" 
          font-family="Verdana" font-size="100" text-anchor="middle" >
      Un texte masqué
    </text>
  </defs>

  <!-- Dessine un rectangle rouge pale en arrière-plan -->
  <rect x="0" y="0" width="800" height="300" fill="#FF8080" />
  
  <!-- Dessine la chaîne textuelle deux fois. En un, remplie en bleu, le masque est appliqué.
   En deux, liserée en noir, sans masque. -->
  <use xlink:href="#Text" fill="blue" mask="url(#Masque)" />
  <use xlink:href="#Text" fill="none" stroke="black" stroke-width="2" />
</svg>

Exemple Masque01

Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
 

<!ENTITY % maskExt "" >
<!ELEMENT mask (desc|title|metadata|defs|
                   path|text|rect|circle|ellipse|line|polyline|polygon|
                   use|image|svg|g|view|switch|a|altGlyphDef|
                   script|style|symbol|marker|clipPath|mask|
                   linearGradient|radialGradient|pattern|filter|cursor|font|
                   animate|set|animateMotion|animateColor|animateTransform|
                   color-profile|font-face
                   %ceExt;%maskExt;)*  >
<!ATTLIST mask
  %stdAttrs;
  %testAttrs;
  %langSpaceAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-All;
  maskUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED
  maskContentUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED
  x %Coordinate; #IMPLIED
  y %Coordinate; #IMPLIED
  width %Length; #IMPLIED
  height %Length; #IMPLIED >

Les propriétés, dans l'élément 'mask', héritent des ancêtres de celui-ci ; les propriétés n'héritent pas de l'élément qui appelle l'élément 'mask'.

Les éléments 'mask' ne sont jamais rendus directement ; leur seule utilisation est comme quelque chose qu'on appelle en utilisant la propriété 'mask'. La propriété 'display' ne s'applique pas aux éléments 'mask' ; ainsi, les éléments 'mask' ne sont pas rendus directement, même si la propriété 'display' a une valeur autre que none, et ils peuvent être appelés, même si la propriété 'display', sur l'élément 'mask' ou l'un de ses ancêtres, a une valeur de none.

Ce qui suit est une description de la propriété 'mask'.

<uri>

Une référence d'URI vers un autre objet graphique qui sera utilisé comme masque.

14.5 L'opacité de l'objet et du groupe : la propriété 'opacity'

Il existe plusieurs propriét&eaute;s d'opacité dans SVG :

• L'opacité du remplissage ;
• L'opacité du liseré ;
• L'opacité de la limite de dégradé ;
• L'opacité de l'objet/groupe (décrite ici).

Sauf pour l'opacité de l'objet/groupe (décrite ci-dessous), toutes les autres propriétés d'opacité sont impliquées dans des opérations de rendu intermédiaires. On peut assimiler l'opacité de l'objet/groupe à une opération de post-traitement. Conceptuellement, après que l'objet/groupe est rendu en une image RGBA hors-écran, le paramétrage de l'opacité de l'objet/groupe spécifie la manière de mélanger cette image hors-écran avec l'arrière-plan courant.

<valeur-alpha> « errata 2002-06-06 »

Le réglage d'opacité uniforme qui s'applique sur l'objet entier. Toutes les valeurs en-dehors de la plage allant de 0.0 (complètement transparent) à 1.0 (complètement opaque) seront ramenées dans cette plage. (Voir la section Le rattachement de valeurs à une plage de valeurs restreinte.) Si l'objet est un élément conteneur, comme un élément 'g', alors l'effet produit est comme si le contenu de l'élément 'g' était mélangé avec l'arrière-plan courant en utilisant un masque, où la valeur de chaque pixel de ce masque a une valeur <valeur-alpha>. (Voir La composition alpha simple).

L'exemple Opacité01 illustre divers usages de la propriété 'opacity' sur des éléments et des groupes.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="12cm" height="3.5cm" viewBox="0 0 1200 350"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Exemple Opacité01 - la propriété opacity </desc>

  <rect x="1" y="1" width="1198" height="348"
        fill="none" stroke="blue" />

  <!-- Rectangle d'arrière-plan bleu -->
  <rect x="100" y="100" width="1000" height="150" fill="#0000ff"  />

  <!-- Des cercles rouges allant d'opaque jusqu'à presque transparent -->
  <circle cx="200" cy="100" r="50" fill="red" opacity="1"  />
  <circle cx="400" cy="100" r="50" fill="red" opacity=".8"  />
  <circle cx="600" cy="100" r="50" fill="red" opacity=".6"  />
  <circle cx="800" cy="100" r="50" fill="red" opacity=".4"  />
  <circle cx="1000" cy="100" r="50" fill="red" opacity=".2"  />

  <!-- Groupe opaque, cercles opaques -->
  <g opacity="1" >
    <circle cx="182.5" cy="250" r="50" fill="red" opacity="1"  />
    <circle cx="217.5" cy="250" r="50" fill="green" opacity="1"  />
  </g>
  <!-- Groupe opacity: .5, cercles opaques -->
  <g opacity=".5" >
    <circle cx="382.5" cy="250" r="50" fill="red" opacity="1"  />
    <circle cx="417.5" cy="250" r="50" fill="green" opacity="1"  />
  </g>
  <!-- Groupe opaque, cercle vert semi-transparent sur le rouge -->
  <g opacity="1" >
    <circle cx="582.5" cy="250" r="50" fill="red" opacity=".5"  />
    <circle cx="617.5" cy="250" r="50" fill="green" opacity=".5"  />
  </g>
  <!-- Groupe opaque, cercle rouge semi-transparent sur le vert -->
  <g opacity="1" >
    <circle cx="817.5" cy="250" r="50" fill="green" opacity=".5"  />
    <circle cx="782.5" cy="250" r="50" fill="red" opacity=".5"  />
  </g>
  <!-- Groupe opacity .5, cercle vert semi-transparent sur le rouge -->
  <g opacity=".5" >
    <circle cx="982.5" cy="250" r="50" fill="red" opacity=".5"  />
    <circle cx="1017.5" cy="250" r="50" fill="green" opacity=".5"  />
  </g>
</svg>

Exemple Opacité01

Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
 

Dans l'exemple ci-dessus, les cercles de la rangée supérieure ont différentes opacités, allant de 1.0 à 0.2. La rangée inférieure montre cinq éléments 'g', chacun d'eux contient des cercles rouge et vert qui se chevauchent, comme suit :

• Le premier groupe illustre le cas opaque de référence. Le groupe a une opacité de 1, tout comme les cercles ;
• Le deuxième groupe illustre une opacité de groupe quand les éléments qui y sont contenus sont opaques ;
• Les troisième et quatrième groupes montre la non-commutativité de l'opacité. Dans le troisième groupe (avec une opacité de 1), un cercle vert semi-transparent est dessiné par-dessus un cercle rouge semi-transparent et, dans le quatrième groupe, un cercle rouge semi-transparent vient par-dessus un cercle vert semi-transparent. Remarquer que les aires d'intersection des deux cercles affichent des couleurs différentes. Dans le troisième groupe, il y a plus de vert, alors que dans le quatrième, il y a plus de rouge ;
• Le cinquième groupe montre l'effet multiplicatif des réglages d'opacité. Les cercles et le groupe lui-même ont une opacité de 0.5. En conséquence, la portion de cercle rouge qui ne recouvre pas le cercle vert (i.e., en haut à gauche du cercle rouge) va se mélanger avec le rectangle bleu avec une opacité cumulé de 0.25 (i.e., 0.5*0.5), ce qui résulte, après le mélange avec le rectangle bleu, en une couleur qui est 25% rouge et 75% bleu.

14.6 Les interfaces du DOM

Les interfaces suivantes sont définies ci-dessous : SVGClipPathElement, SVGMaskElement.

L'interface SVGClipPathElement

L'interface SVGClipPathElement correspond à l'élément 'clipPath'.

Définition IDL

interface SVGClipPathElement : 
                SVGElement,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGTransformable,
                SVGUnitTypes { 

  readonly attribute SVGAnimatedEnumeration clipPathUnits;
};

attributs

readonly SVGAnimatedEnumeration clipPathUnits

Correspond à l'attribut clipPathUnits sur l'élément 'clipPath' donné. Prend l'une des constantes définies dans SVGUnitTypes.

L'interface SVGMaskElement

L'interface SVGMaskElement correspond à l'élément 'mask'.

Définition IDL

interface SVGMaskElement : 
                SVGElement,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGUnitTypes { 

  readonly attribute SVGAnimatedEnumeration maskUnits;
  readonly attribute SVGAnimatedEnumeration maskContentUnits;
  readonly attribute SVGAnimatedLength      x;
  readonly attribute SVGAnimatedLength      y;
  readonly attribute SVGAnimatedLength      width;
  readonly attribute SVGAnimatedLength      height;
};

attributs

readonly SVGAnimatedEnumeration maskUnits

Correspond à l'attribut maskUnits sur l'élément 'mask' donné. Prend l'une des constantes définies dans SVGUnitTypes.

readonly SVGAnimatedEnumeration maskContentUnits

Correspond à l'attribut maskContentUnits sur l'élément 'mask' donné. Prend l'une des constantes définies dans SVGUnitTypes.

readonly SVGAnimatedLength x

Correspond à l'attribut x sur l'élément 'mask' donné.

readonly SVGAnimatedLength y

Correspond à l'attribut y sur l'élément 'mask' donné.

readonly SVGAnimatedLength width

Correspond à l'attribut width sur l'élément 'mask' donné.

readonly SVGAnimatedLength height

Correspond à l'attribut height sur l'élément 'mask' donné.