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).
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 :
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).
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.
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.
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é.
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>).
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 :
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.
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 |
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 |
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>
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>
![]() |
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 :
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'.
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 |
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.
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 |
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>
![]() |
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 :
Les interfaces suivantes sont définies ci-dessous : SVGClipPathElement, SVGMaskElement.
L'interface SVGClipPathElement correspond à l'élément 'clipPath'.
interface SVGClipPathElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable, SVGUnitTypes { readonly attribute SVGAnimatedEnumeration clipPathUnits; };
L'interface SVGMaskElement correspond à l'élément 'mask'.
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; };