4 septembre 2001

14 Le rognage, le masquage et la composition


Contenu


 

14.1 Introduction

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

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 :


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'


'overflow'
Valeur :   visible | hidden | scroll | auto | inherit vf.
Valeur initiale :   voir explication
S'applique à :   ceux des éléments qui établissent une nouvelle zone de visualisation, aux éléments 'pattern' et 'marker'
Héritée :   non
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui

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 :

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.

'clip'
Valeur :   <forme> | auto | inherit vf.
Valeur initiale :   auto
S'applique à :   ceux des éléments qui établissent une nouvelle zone de visualisation, aux éléments 'pattern' et 'marker'
Héritée :   non
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui

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 :


 
<!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 >

Définitions des attributs :

clipPathUnits = "userSpaceOnUse | objectBoundingBox"
Définit le système de coordonnées pour le contenu de l'élément 'clipPath'.
Pour une spécification clipPathUnits="userSpaceOnUse", le contenu de 'clipPath' représente des valeurs dans le système de coordonnées utilisateur courant en vigueur au moment où l'élément 'clipPath' est appelé (i.e., le système de coordonnées utilisateur de l'élément qui appelle l'élément 'clipPath' via la propriété 'clip-path').
Pour une spécification clipPathUnits="objectBoundingBox", alors le système de coordonnées utilisateur pour le contenu de l'élément 'clipPath' est établi en utilisant la boîte englobante de l'élément sur lequel le tracé de rognage est appliqué (voir Les unités de la boîte englobante de l'objet).
Si l'attribut clipPathUnits n'est pas spécifié, alors l'effet produit est comme si une valeur de userSpaceOnUse était spécifiée.
Animable : oui.

Attributs définis ailleurs :
%stdAttrs;, %testAttrs;, %langSpaceAttrs;, externalResourcesRequired, class, style, %PresentationAttributes-Color;, %PresentationAttributes-FillStroke;, %PresentationAttributes-FontSpecification;, %PresentationAttributes-Graphics;, %PresentationAttributes-TextContentElements;, %PresentationAttributes-TextElements;, transform.

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.

 
'clip-path'
Valeur :   <uri> | none | inherit vf.
Valeur initiale :   none
S'applique à :   ceux des éléments conteneurs et des éléments graphiques
Héritée :   non
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui
<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.
'clip-rule'
Valeur :   nonzero | evenodd | inherit vf.
Valeur initiale :   nonzero
S'applique à :   ceux des éléments graphiques dans un élément 'clipPath'
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui
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
Exemple Masque01 - Texte en bleu masqué avec un dégradé contre un fond rougeâtre

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 >

Définitions des attributs :

maskUnits = "userSpaceOnUse | objectBoundingBox"
Définit le système de coordonnées pour les attributs x, y, width, height.
Pour une spécification maskUnits="userSpaceOnUse", les attributs x, y, width, height représentent des valeurs dans le système de coordonnées utilisateur courante en vigueur au moment où l'élément 'mask' est appelé (i.e., le système de coordonnées utilisateur de l'élément qui appelle l'élément 'mask' via la propriété 'mask').
Pour une spécification maskUnits="objectBoundingBox", les attributs x, y, width, height représentent des fractions ou pourcentages de la boîte de délimitation de l'élément sur lequel le masque est appliqué. (Voir la section Les unités de la boîte englobante de l'objet).
Si l'attribut maskUnits n'est pas spécifié, alors l'effet produit est comme si une valeur de objectBoundingBox était spécifiée.
Animable : oui.
maskContentUnits = "userSpaceOnUse | objectBoundingBox"
Définit le système de coordonnées pour le contenu de l'élément 'mask'.
Pour une spécification maskContentUnits="userSpaceOnUse", le système de coordonnées utilisateur pour le contenu de l'élément 'mask' est le système de coordonnées utilisateur courant en vigueur au moment où l'élément 'mask' est appelé (i.e., le système de coordonnées utilisateur de l'élément qui appelle l'élément 'mask' via la propriété 'mask').
Pour une spécification maskContentUnits="objectBoundingBox", le système de coordonnées utilisateur pour le contenu de l'élément 'mask' est établi en utilisant la boîte englobante de l'élément sur leque le masque est appliqué. (Voir la section Les unités de la boîte englobante de l'objet.)
Si l'attribut maskContentUnits n'est pas spécifié, alors l'effet produit est comme si une valeur de userSpaceOnUse était spécifiée.
Animable : oui.
x = "<coordonnée>"
La coordonnée sur l'axe-x d'un coin du rectangle de tampon hors-écran le plus grand possible. Remarquer que le tracé de rognage utilisé pour le rendu de tout graphique dans le masque correspondra à l'intersection du tracé de rognage courant associé à l'objet donné et du rectangle défini par les attributs x, y, width, height.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "-10%" était spécifiée.
Animable : oui.
y = "<coordonnée>"
La coordonnée sur l'axe-y d'un coin du rectangle de tampon hors-écran le plus grand possible.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "-10%" était spécifiée.
Animable : oui.
width = "<longueur>"
La largeur du tampon hors-écran le plus grand possible. Remarquer que le tracé de rognage utilisé pour le rendu de tout graphique dans le masque correspondra à l'intersection du tracé de rognage courant associé à l'objet donné et du rectangle défini par les attributs x, y, width, height.
Une valeur négative provoque une erreur (voir Le traitement des erreurs). Une valeur de zéro désactive le rendu de l'élément.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "120%" était spécifiée.
Animable : oui.
height = "<longueur>"
La hauteur du tampon hors-écran le plus grand possible.
Une valeur négative provoque une erreur (voir Le traitement des erreurs). Une valeur de zéro désactive le rendu de l'élément.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "120%" était spécifiée.
Animable : oui.

Attributs définis ailleurs :
%stdAttrs;, %testAttrs;, %langSpaceAttrs;, externalResourcesRequired, class, style, %PresentationAttributes-All;.

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'.

'mask'
Valeur :   <uri> | none | inherit vf.
Valeur initiale :   none
S'applique à :   ceux des éléments conteneurs et aux éléments graphiques
Héritée :   non
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui
<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 :

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.

'opacity'
Valeur :   <valeur-alpha> | inherit vf. « errata 2002-06-06 »
Valeur initiale :   1
S'applique à :   ceux des éléments conteneurs et aux éléments graphiques
Héritée :   non
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui
<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
Exemple Opacité01 - propriété opacity

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 :


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é.