4 septembre 2001

13 Les dégradés et les motifs


Contenu


 

13.1 Introduction

Avec SVG, on peut remplir (i.e., peindre l'intérieur) ou liserer (i.e., peindre le contour) les formes et le texte avec les manières suivantes :

SVG emploie la notion générale de serveur de peinture. Les dégradés et les motifs sont justes des types particuliers de serveurs de peinture internes.

Les serveurs de peinture sont appelés en utilisant une référence d'URI sur une propriété 'fill' ou 'stroke'.

13.2 Les dégradés

13.2.1 Introduction

Les dégradés consistent en des transitions de couleur progressives continues au long d'un vecteur, d'une couleur à l'autre, éventuellement suivies de transitions supplémentaires au long du même vecteur vers d'autres couleurs. SVG dispose de deux types de dégradés, ceux linéaires et ceux radiaux.

Une fois définis, les dégradés sont appelés en utilisant les propriétés 'fill' ou or 'stroke', sur un élément graphique donné, qui indiquent que cet élément donné devra être rempli ou liseré avec le dégradé appelé.

13.2.2 Les dégradés linéaires

Un dégradé linéaire est défini par un élément 'linearGradient'.
 

<!ENTITY % linearGradientExt "" >
<!ELEMENT linearGradient (%descTitleMetadata;,(stop|animate|set|animateTransform
                   %linearGradientExt;)*) >
<!ATTLIST linearGradient
  %stdAttrs;
  %xlinkRefAttrs;
  xlink:href %URI; #IMPLIED
  externalResourcesRequired %Boolean; #IMPLIED
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-Color;
  %PresentationAttributes-Gradients;
  gradientUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED
  gradientTransform %TransformList; #IMPLIED
  x1 %Coordinate; #IMPLIED
  y1 %Coordinate; #IMPLIED
  x2 %Coordinate; #IMPLIED
  y2 %Coordinate; #IMPLIED
  spreadMethod (pad | reflect | repeat) #IMPLIED >

Définitions des attributs :

gradientUnits = "userSpaceOnUse | objectBoundingBox"
Définit le système de coordonnées pour les attributs x1, y1, x2, y2.
Pour une spécification gradientUnits="userSpaceOnUse", les attributs x1, y1, x2, y2 représentent des valeurs dans le système de coordonnées obtenu en prenant le système de coordonnées utilisateur courant en vigueur au moment où l'élément de dégradé est appelé (i.e., le système de coordonnées utilisateur de l'élément appelant l'élément de dégradé via une propriété 'fill', ou 'stroke') puis en lui appliquant la transformation spécifiée par l'attribut gradientTransform.
Pour une spécification gradientUnits="objectBoundingBox", le système de coordonnées utilisateur pour les attributs x1, y1, x2, y2 est établi en utilisant la boîte englobante de l'élément sur lequel le dégradé est appliqué (voir la section Les unités de la boîte englobante de l'objet) puis en lui appliquant la transformation spécifiée par l'attribut gradientTransform.
Quand les spécifications gradientUnits="objectBoundingBox" et gradientTransform correspondent à la matrice identité, les bandes du dégradé linéaire sont perpendiculaires au vecteur de dégradé dans l'espace de la boîte englobante de l'objet (i.e., le système de coordonnées abstrait où le point (0,0) est situé au coin supérieur gauche de la boîte de délimitation de l'objet et le point (1,1) au coin inférieur droit). Quand la boîte englobante de l'objet n'est pas carrée, les bandes, qui sont conceptuellement perpendiculaires au vecteur de dégradé dans l'espace de la boîte englobante de l'objet, seront rendues non perpendiculairement par rapport au vecteur de dégradé dans l'espace utilisateur, en raison de l'application de la transformation en changement d'échelle non uniforme de l'espace de la boîte englobante vers l'espace utilisateur.
Si l'attribut gradientUnits n'est pas spécifié, l'effet produit est comme si la valeur objectBoundingBox était spécifiée.
Animable : oui.
gradientTransform = "<liste-transformation>"
Contient la définition d'une transformation supplémentaire optionnelle du système de coordonnées du dégradé vers celui de la cible (i.e., userSpaceOnUse ou objectBoundingBox). Ceci autorise des effets comme l'inclinaison du dégradé. Cette matrice de transformation supplémentaire est post-multipliée (i.e., insérée à la droite de toute transformation définie précédemment, y compris la transformation implicite nécessaire à la conversion des unités de la boîte englobante de l'objet vers l'espace utilisateur.
Si l'attribut gradientTransform n'est pas spécifié, alors l'effet produit est comme si une transformation identité était spécifiée.
Animable : oui.
x1 = "<coordonnée>"
Les valeurs x1, y1, x2, y2 définissent le vecteur de dégradé d'un dégradé linéaire. Ce vecteur de dégradé fournit les points de départ et d'arrivée auxquels les limites du dégradé correspondent. Les valeurs de x1, y1, x2, y2 peuvent être soit des nombres, soit des pourcentages.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "0" était spécifiée.
Animable : oui.
y1 = "<coordonnée>"
Voir x1.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "0" était spécifiée.
Animable : oui.
x2 = "<coordonnée>"
Voir x1.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "0" était spécifiée.
Animable : oui.
y2 = "<coordonnée>"
See x1.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "0" était spécifiée.
Animable : oui.
spreadMethod = "pad | reflect | repeat"
Indique ce qui se passe au départ et à l'arrivée du dégradé dans les limites du rectangle cible. Les valeurs possibles sont : pad, qui indique d'utiliser les couleurs terminales du dégradé pour remplir le reste de la région cible, reflect, qui indique de réfléter le motif du dégradé du début-à-la-fin, de la fin-au-début, du début-à-la-fin, etc., en continu jusqu'à ce que le rectangle cible soit rempli, et repeat, qui indique de répéter le motif du dégradé du début-à-la-fin, début-à-la-fin, etc., jusqu'à ce que la région cible soit remplie.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "pad" était spécifiée.
Animable : oui.
xlink:href = "<uri>"
Une référence d'URI vers un élément 'linearGradient', ou 'radialGradient', différent dans le fragment de document SVG courant. Tous les attributs d'un élément 'linearGradient' qui sont définis sur l'élément appelé mais qui ne sont pas définis sur cet élément, sont hérités par cet élément. Si cet élément n'a pas de limites de dégradé définies, alors que l'élément appelé en a (en raison éventuellement de son propre attribut href), alors cet élément hérite des limites de dégradé de l'élément appelé. L'héritage peut être indirect jusqu'à un niveau arbitraire ; ainsi, si l'élément appelé hérite des attributs ou des limites de dégradé du fait de son propre attribut href, alors l'élément courant peut hériter de ces attributs ou limites de dégradé.
Animable : oui.

Attributs définis ailleurs :
%stdAttrs;, %xlinkRefAttrs;, externalResourcesRequired, %PresentationAttributes-Color;, %PresentationAttributes-Gradients;.

Les valeurs x1, y1, x2, y2 admettent des pourcentages. Pour une spécification gradientUnits="userSpaceOnUse", les valeurs en pourcentage se rapportent à la zone de visualisation courante. Pour une spécification gradientUnits="objectBoundingBox", les valeurs en pourcentage se rapportent à la boîte de délimitation de l'objet.

Si les valeurs de x1 = x2 et y1 = y2, alors l'aire à peindre sera peinte en une seule couleur en utilisant la couleur et l'opacité de la dernière limite de dégradé.

Les propriétés de l'élément 'linearGradient' 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 'linearGradient'.

Les éléments 'linearGradient' ne sont jamais rendus directement ; leur seul utilisation est comme quelque chose qui peut être appelée en utilisant les propriétés 'fill' ou 'stroke'. La propriété 'display' ne s'applique pas aux éléments 'linearGradient' ; ainsi, les éléments 'linearGradient' 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 'linearGradient' ou l'un de ses ancêtres ont une valeur de none.

L'exemple DégradéLinéaire01 montre comment remplir un rectangle en appelant un serveur de peinture de dégradé linéaire.

<?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="4cm" viewBox="0 0 800 400"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Exemple DégradéLinéaire01 - remplir un rectangle
           en utilisant un serveur de peinture de dégradé linéaire</desc>
  <g>
    <defs>
      <linearGradient id="MonDegrade">
        <stop offset="5%" stop-color="#F60" />
        <stop offset="95%" stop-color="#FF6" />
      </linearGradient>
    </defs>

    <!-- Le contour en bleu de l'aire de dessin -->
    <rect fill="none" stroke="blue" 
          x="1" y="1" width="798" height="398"/>

    <!-- Le rectangle est rempli en utilisant un serveur de peinture de dégradé linéaire -->
    <rect fill="url(#MonDegrade)" stroke="black" stroke-width="5"  
          x="100" y="100" width="600" height="200"/>
  </g>
</svg>
Exemple DégradéLinéaire01
Exemple DégradéLinéaire01 - remplissage d'un rectangle en appelant un serveur de peinture de dégradé linéaire

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

13.2.3 Les dégradés radiaux

Un dégradé radial est défini par un élément 'radialGradient'.
 

<!ENTITY % radialGradientExt "" >
<!ELEMENT radialGradient (%descTitleMetadata;,(stop|animate|set|animateTransform
                   %radialGradientExt;)*) >
<!ATTLIST radialGradient
  %stdAttrs;
  %xlinkRefAttrs;
  xlink:href %URI; #IMPLIED
  externalResourcesRequired %Boolean; #IMPLIED
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-Color;
  %PresentationAttributes-Gradients;
  gradientUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED
  gradientTransform %TransformList; #IMPLIED
  cx %Coordinate; #IMPLIED
  cy %Coordinate; #IMPLIED
  r %Length; #IMPLIED
  fx %Coordinate; #IMPLIED
  fy %Coordinate; #IMPLIED
  spreadMethod (pad | reflect | repeat) #IMPLIED >

Définitions des attributs :

gradientUnits = "userSpaceOnUse | objectBoundingBox"
Définit le système de coordonnées pour les attributs cx, cy, r, fx, fy.
Pour une spécification gradientUnits="userSpaceOnUse", les attributs cx, cy, r, fx, fy représentent des valeurs dans le système de coordonnées obtenu en prenant le système de coordonnées utilisateur courant en vigueur au moment où l'élément de dégradé est appelé (i.e., le système de coordonnées utilisateur de l'élément qui appelle l'élément de dégradé via les propriétés 'fill' ou 'stroke'), puis en lui appliquant la transformation spécifiée par l'attribut gradientTransform.
Pour une spécification gradientUnits="objectBoundingBox", le système de coordonnées utilisateur pour les attributs cx, cy, r, fx, fy est établi en utilisant la boîte englobante de l'objet, sur lequel le dégradé est appliqué (voir la section Les unités de boîte englobante de l'objet), puis en lui appliquant la transformation spécifiée par l'attribut gradientTransform.
Quand les spécifications gradientUnits="objectBoundingBox" et gradientTransform correspondent à la matrice identité, alors les anneaux du dégradé radial sont circulaires par rapport à l'espace de la boîte englobante de l'objet (i.e., le système de coordonnées abstrait dans lequel le point (0,0) est situé au coin supérieur gauche et le point (1,1) au coin inférieur droit de la boîte englobante de l'objet). Quand la boîte englobante de l'objet n'est pas carrée, les anneaux, qui sont conceptuellement circulaires dans la boîte englobante de l'objet, seront rendus elliptiquement, en raison de l'application de la transformation en changement d'échelle non uniforme de l'espace de la boîte englobante vers l'espace utilisateur.
Si l'attribut gradientUnits n'est pas spécifié, alors l'effet produit est comme si une valeur de objectBoundingBox était spécifiée.
Animable : oui.
gradientTransform = "<liste-transformation>"
Contient les définitions d'une transformation supplémentaire optionnelle du système de coordonnées du dégradé vers celui de la cible (i.e., userSpaceOnUse ou objectBoundingBox). Ceci autorise des effets comme l'inclinaison du dégradé. Cette matrice de transformation supplémentaire est post-multipliée (i.e., insérée à la droite de toute transformation définie précédemment, y compris la transformation implicite nécessaire à la conversion des unités de la boîte englobante de l'objet vers l'espace utilisateur.
Si l'attribut gradientTransform n'est pas spécifié, alors l'effet produit est comme si une transformation identité était spécifiée.
Animable : oui.
cx = "<coordonnée>"
Les attributs cx, cy, r définissent le plus grand cercle (i.e., le plus externe) pour le dégradé radial. Le dégradé sera dessiné de telle façon que la limite de dégradé de 100% corresponde au périmètre de ce plus grand cercle.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "50%" était spécifiée.
Animable : oui.
cy = "<coordonnée>"
Voir cx.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "50%" était spécifiée.
Animable : oui.
r = "<longueur>"
Voir cx.
Une valeur négative provoque une erreur (voir Le traitement des erreurs). Une valeurd de zéro entraïnera la peinture de la région concernée en une seule couleur en utilisant la couleur et l'opacité de la dernière limite de dégradé.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "50%" était spécifiée.
Animable : oui.
fx = "<coordonnée>"
Les attribut fx, fy définissent le foyer du dégradé radial. Le dégradé sera dessiné de telle manière que la limite de dégradé de 0% corresponde au point (fx,fy).
Si l'attribut fx n'est pas spécifié, la valeur de fx coïncidera avec celle de cx.
Animable : oui.
fy = "<coordonnée>"
Voir fx.
Si l'attribut fy n'est pas spécifié, la valeur de fy coïncidera avec celle de cy.
Animable : oui.
spreadMethod = "pad | reflect | repeat"
Indique ce qui se passe quand le dégradé commence ou finit à l'intérieur des limites de l'objet, ou des objets, concernés par la peinture en dégradé. Mêmes valeurs et significations que pour l'attribut spreadMethod sur l'élément 'linearGradient'.
Animable : oui.
xlink:href = "<uri>"
Une référence d'URI vers un élément 'linearGradient', ou 'radialGradient', différent dans le fragment de document SVG courant. Tous les attributs d'un élément 'radialGradient' qui sont définis sur l'élément appelé mais qui ne sont pas définis sur cet élément, sont hérités par cet élément. Si cet élément n'a pas de limites de dégradé définies, alors que l'élément appelé en a (en raison éventuellement de son propre attribut href), alors cet élément hérite des limites de dégradé de l'élément appelé. L'héritage peut être indirect jusqu'à un niveau arbitraire ; ainsi, si l'élément appelé hérite des attributs ou des limites de dégradé du fait de son propre attribut href, alors l'élément courant peut hériter de ces attributs ou limites de dégradé.
Animable : oui.

Attributs définis ailleurs :
%stdAttrs;, %xlinkRefAttrs;, externalResourcesRequired, %PresentationAttributes-Color;, %PresentationAttributes-Gradients;.

Les attributs cx, cy, r, fx et fy admettent des valeurs en pourcentage. Pour une spécification gradientUnits="userSpaceOnUse", les valeurs en pourcentage se rapportent à la zone de visualisation courante. Pour une spécification gradientUnits="objectBoundingBox", les valeurs en pourcentage se rapportent à la boîte englobante de l'objet.

Si le point défini par les attributs fx et fy se tient hors du cercle défini par les attributs cx, cy et r, alors l'agent utilisateur devra placer le point focal à l'intersection du segment de droite, allant du point (cx, cy) au point (fx, fy), avec le cercle défini par les attributs cx, cy et r.

Les propriétés dans l'élément 'radialGradient' 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 'radialGradient'.

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

L'exemple DégradéRadial01 montre comment remplir un rectangle en appelant un serveur de peinture de dégradé radial.

<?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="4cm" viewBox="0 0 800 400"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Exemple DégradéRadial01 - remplir un rectangle 
           en appelant un serveur de peinture de dégradé radial</desc>
  <g>
    <defs>
      <radialGradient id="MonDegrade" gradientUnits="userSpaceOnUse"
                      cx="400" cy="200" r="300" fx="400" fy="200">
        <stop offset="0%" stop-color="red" />
        <stop offset="50%" stop-color="blue" />
        <stop offset="100%" stop-color="red" />
      </radialGradient>
    </defs>

    <!-- Le contour en bleu de l'aire du dessin -->
    <rect fill="none" stroke="blue" 
          x="1" y="1" width="798" height="398"/>

    <!-- Le rectangle est rempli en utilisant un serveur de peinture de dégradé radial -->
    <rect fill="url(#MonDegrade)" stroke="black" stroke-width="5"  
          x="100" y="100" width="600" height="200"/>
  </g>
</svg>
Exemple DégradéRadial01
Exemple DégradéRadial01 - remplissage d'un rectangle en appelant un serveur de peinture de dégradé radial

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

13.2.4 Les arrêts de dégradé

L'échelle des couleurs à utiliser dans un dégradé est définie par les éléments 'stop', enfants soit de l'élément 'linearGradient', soit de l'élément 'radialGradient'.

<!ENTITY % stopExt "" >
<!ELEMENT stop (animate|set|animateColor
                   %stopExt;)* >
<!ATTLIST stop
  %stdAttrs;
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-Color;
  %PresentationAttributes-Gradients;
  offset %NumberOrPercentage; #REQUIRED >

Définitions des attributs :

offset = "<nombre> | <pourcentage>"
L'attribut offset a une valeur soit de <nombre> (habituellement dans une plage de 0 à 1), soit de <pourcentage> (habituellement dans une plage de 0% à 100%), qui indique où l'arrêt du dégradé se situe. Pour les dégradés linéaires, l'attribut offset représente une situation au long du vecteur de dégradé. Pour les dégradés radiaux, c'est une distance en pourcentage à partir du point (fx,fy) jusqu'au bord du cercle le plus grand/externe.
Animable : oui.

Attributs définis ailleurs :
%stdAttrs;, class, style, %PresentationAttributes-Color;, %PresentationAttributes-Gradients;.

La propriété 'stop-color' indique la couleur utilisée à cette limite de dégradé. On peut spécifier le mot-clé currentColor et des couleurs ICC de la même manière que dans une spécification de <peinture> pour les propriétés 'fill' et 'stroke'.

'stop-color'
Valeur :   currentColor |
<couleur> [icc-color(<nom>[,<valeur-couleur-icc>]*)] |
inherit vf.
Valeur initiale :   black
S'applique à :   ceux des éléments 'stop'
Héritée :   non
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui

La propriété 'stop-opacity' définit l'opacité d'un arrêt de dégradé donné.

'stop-opacity'
Valeur :   <valeur-alpha> | inherit vf. « errata 2002-06-06 »
Valeur initiale :   1
S'applique à :   ceux des éléments 'stop'
Héritée :   non
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui

Quelques remarques sur les dégradés :

13.3 Les motifs

On utilise un motif pour remplir ou liserer un objet en utilisant un objet graphique prédéfini qui peut se répéter (« en mosaïque ») à intervalle fixe sur x et y pour recouvrir les aires à peindre. Les motifs sont définis avec un élément 'pattern', puis appelés par les propriétés 'fill' et 'stroke' sur un élément graphique donné pour signifier un remplissage ou un liseré de celui-ci avec le motif appelé.

Les attributs x, y, width, height et patternUnits définissent un rectangle de référence quelque part sur le canevas infini. Le rectangle de référence a un coin supérieur gauche à (x,y) et un coin inférieur droit à (x+width,y+height). La mosaïque reproduit en théorie une succession de ce rectangle à l'infini (positif et négatif) selon X et Y, les répétitions de rectangle intervenant à (x + m*widthy + n*height) pour chaque valeur entière possible de m et n.

<!ENTITY % patternExt "" >
<!ELEMENT pattern (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;%patternExt;)* >
<!ATTLIST pattern
  %stdAttrs;
  %xlinkRefAttrs;
  xlink:href %URI; #IMPLIED
  %testAttrs;
  %langSpaceAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-All;
  viewBox %ViewBoxSpec; #IMPLIED
  preserveAspectRatio %PreserveAspectRatioSpec; 'xMidYMid meet'
  patternUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED
  patternContentUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED
  patternTransform %TransformList; #IMPLIED
  x %Coordinate; #IMPLIED
  y %Coordinate; #IMPLIED
  width %Length; #IMPLIED
  height %Length; #IMPLIED >

Définitions des attributs :

patternUnits = "userSpaceOnUse | objectBoundingBox"
Définit le système de coordonnées pour les attributs x, y, width, height.
Pour une spécification patternUnits="userSpaceOnUse", les attributs x, y, width, height représentent des valeurs dans le système de coordonnées obtenu en prenant le système de coordonnées utilisateur courant en vigueur au moment où l'élément 'pattern' est appelé (i.e., le système de coordonnées de l'élément qui appelle l'élément 'pattern' via une propriété 'fill' ou 'stroke' property), puis en lui appliquant la transformation spécifiée par l'attribut patternTransform.
Pour une spécification patternUnits="objectBoundingBox", le système de coordonnées pour les attributs x, y, width, height est établi en utilisant la boîte de délimitation de l'élément sur lequel le motif est appliqué (voir la section Les unités de la boîte englobante de l'objet), puis en lui appliquant la transformation spécifiée par l'attribut patternTransform.
Si l'attribut patternUnits n'est pas spécifié, alors l'effet produit est comme si une valeur de objectBoundingBox était spécifiée.
Animable : oui.
patternContentUnits = "userSpaceOnUse | objectBoundingBox"
Définit le système de coordonnées pour le contenu de l'élément 'pattern'. Remarquer que cet attribut ne produit aucun effet si l'attribut viewBox est spécifié.
Pour une spécification patternContentUnits="userSpaceOnUse", le système de coordonnées utilisateur pour le contenu de l'élément 'pattern' est le système de coordonnée obtenu en prenant celui courant en vigueur au moment où l'élément 'pattern' est appelé (i.e., le système de coordonnées utilisateur de l'élément qui appelle l'élément 'pattern' via une propriété 'fill' ou 'stroke'), puis en lui appliquant la transformation spécifiée par l'attribut patternTransform.
Pour une spécification patternContentUnits="objectBoundingBox", le système de coordonnées utilisateur pour le contenu de l'élément 'pattern' est établi en utilisant la boîte englobante de l'élément sur lequel le motif est appliqué (voir la section Les unités de la boîte englobante de l'objet), puis en lui appliquant la transformation spécifiée par l'attribut patternTransform.
Si l'attribut patternContentUnits n'est pas spécifié, alors l'effet produit est comme si une valeur de userSpaceOnUse était spécifiée.
Animable : oui.
patternTransform = "<liste-transformation>"
Contient la définition d'une transformation supplémentaire optionnelle du système de coordonnées du motif vers celui de la cible (i.e., userSpaceOnUse ou objectBoundingBox). Ceci autorise des effets comme l'inclinaison du motif. Cette matrice de transformation supplémentaire est post-multipliée (i.e., insérée à la droite de toute transformation définie précédemment, y compris la transformation implicite nécessaire à la conversion des unités de la boîte englobante de l'objet vers l'espace utilisateur.
Si l'attribut patternTransform n'est pas spécifié, alors l'effet produit est comme si une transformation identité était spécifiée.
Animable : oui.
x = "<coordonnée>"
Les attributs x, y, width, height indiquent comment la mosaïque de motif est placée et espacée. Ces attributs représentent des coordonnées et des valeurs dans le système de coordonnées spécifié par la combinaison des attributs patternUnits et patternTransform.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "0" était spécifiée.
Animable : oui.
y = "<coordonnée>"
Voir x.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "0" était spécifiée.
Animable : oui.
width = "<longueur>"
Voir x.
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 (i.e., aucune peinture n'est appliquée).
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "0" était spécifiée.
Animable : oui.
height = "<longueur>"
Voir x.
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 (i.e., aucune peinture n'est appliquée).
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "0" était spécifiée.
Animable : oui.
xlink:href = "<uri>"
Une référence d'URI vers un élément 'pattern' différent dans le fragment de document SVG courant. element within the current SVG document fragment. Tous les attributs qui sont définis sur l'élément appelé mais qui ne sont pas définis sur cet élément, sont hérités par cet élément. Si cet élément n'a pas d'enfants, alors que l'élément appelé en a (en raison éventuellement de son propre attribut href), alors cet élément hérite des enfants de l'élément appelé. L'héritage peut être indirect jusqu'à un niveau arbitraire ; ainsi, si l'élément appelé hérite des attributs ou d'enfants du fait de son propre attribut href, alors l'élément courant peut hériter de ces attributs ou de ces enfants.
Animable : oui.

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

La feuille de style de l'agent utilisateur de SVG établit, pour la propriété 'overflow' des éléments 'pattern', une valeur de hidden, ce qui entraîne la création d'un tracé de rognage rectangulaire aux limites de la mosaïque de motif. À moins que la propriété 'overflow' ne soit surclassée, tous les graphiques dans le motif qui dépassent du rectangle de motif seront rognés. L'exemple Motif01 ci-dessous montre l'effet du rognage sur la mosaïque de motif.

Le contenu de l'élément 'pattern' est relatif à un nouveau système de coordonnées. S'il y a un attribut viewBox, alors le nouveau système de coordonnées se loge dans la région définie par les attributs x, y, width, height et patternUnits sur l'élément 'pattern' en utilisant les règles habituelles pour les attributs viewBox et preserveAspectRatio. S'il n'y a pas d'attribut viewBox, alors le nouveau système de coordonnées a pour origine le point (x,y), où x est établit par l'attribut x et y par l'attribut y de l'élément 'pattern'. Ainsi, dans l'exemple suivant :

<pattern x="10" y="10" width="20" height="20">
   <rect x="5" y="5" width="10" height="10"/>
</pattern>

le rectangle a son coin supérieur gauche situé à 5 unités vers la droite et à 5 unités vers le bas, à partir de l'origine de la mosaïque de motif.

L'attribut viewBox introduit une transformation supplémentaire, qui s'applique par-dessus toutes les transformations nécessaires à la crétion d'un nouveau système de coordonnées de motif en raison des attributs x, y, width, height et patternUnits.

Les propriétés dans l'élément 'pattern' 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 'pattern' .

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

Les attributs d'événement et les guetteurs d'événement attachés au contenu d'un élément 'pattern' ne sont pas traités ; seuls les aspects de rendu des éléments 'pattern' sont traités.

L'exemple Motif01 montre comment remplir un rectangle en appelant un serveur de peinture de motif. Remarquer que le liseré bleu de chaque triangle a été rogné en haut et à gauche. Ceci est dû à la feuille de style de l'agent utilisateur qui donne, pour la propriété 'overflow' de tous les éléments 'pattern', une valeur de hidden, ce qui entraîne le rognage du motif aux limites de la mosaïque de motif.

<?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="4cm" viewBox="0 0 800 400"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="MotifTriangle" patternUnits="userSpaceOnUse"
             x="0" y="0" width="100" height="100"
             viewBox="0 0 10 10" >
      <path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" />
    </pattern> 
  </defs>

  <!-- Le contour bleu de l'aire du dessin -->
  <rect fill="none" stroke="blue" 
        x="1" y="1" width="798" height="398"/>

  <!-- L'ellipse est remplie en utilisant un serveur de peinture de motif en triangle
       et liserée en noir -->
  <ellipse fill="url(#MotifTriangle)" stroke="black" stroke-width="5"  
           cx="400" cy="200" rx="350" ry="150" />
</svg>
Exemple Motif01
Exemple Motif01 - remplissage d'un rectangle en appelant un serveur de peinture dedégradé radial

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

13.4 Les interfaces du DOM

Les interfaces suivantes sont définies ci-dessous : SVGGradientElement, SVGLinearGradientElement, SVGRadialGradientElement, SVGStopElement, SVGPatternElement.


L'interface SVGGradientElement

L'interface SVGGradientElement est une interface de base utilisée par SVGLinearGradientElement et SVGRadialGradientElement.


Définition IDL
interface SVGGradientElement : 
                SVGElement,
                SVGURIReference,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGUnitTypes { 

  // Types de méthode de diffusion
  const unsigned short SVG_SPREADMETHOD_UNKNOWN = 0;
  const unsigned short SVG_SPREADMETHOD_PAD     = 1;
  const unsigned short SVG_SPREADMETHOD_REFLECT = 2;
  const unsigned short SVG_SPREADMETHOD_REPEAT  = 3;

  readonly attribute SVGAnimatedEnumeration   gradientUnits;
  readonly attribute SVGAnimatedTransformList gradientTransform;
  readonly attribute SVGAnimatedEnumeration   spreadMethod;
};

Groupe de définition des types de méthode de diffusion
Constantes définies
SVG_SPREADMETHOD_UNKNOWN Le type ne fait pas partie de ceux prédéfinis. Tenter de définir une nouvelle valeur de ce type ou tenter de changer une valeur existante vers ce type est illégal.
SVG_SPREADMETHOD_PAD Correspond à la valeur pad.
SVG_SPREADMETHOD_REFLECT Correspond à la valeur reflect.
SVG_SPREADMETHOD_REPEAT Correspond à la valeur repeat.
attributs
readonly SVGAnimatedEnumeration gradientUnits
Correspond à l'attribut gradientUnits sur l'élément donné. Prend l'une des constantes définies dans SVGUnitTypes.
readonly SVGAnimatedTransformList gradientTransform
Correspond à l'attribut gradientTransform sur l'élément donné.
readonly SVGAnimatedEnumeration spreadMethod
Correspond à l'attribut spreadMethod sur l'élément donné. L'un des types de méthode de diffusion.

L'interface SVGLinearGradientElement

L'interface SVGLinearGradientElement correspond à l'élément 'linearGradient'.


Définition IDL
interface SVGLinearGradientElement : SVGGradientElement { 
  readonly attribute SVGAnimatedLength x1;
  readonly attribute SVGAnimatedLength y1;
  readonly attribute SVGAnimatedLength x2;
  readonly attribute SVGAnimatedLength y2;
};

attributs
readonly SVGAnimatedLength x1
Correspond à l'attribut x1 de l'élément 'linearGradient'.
readonly SVGAnimatedLength y1
Correspond à l'attribut y1 de l'élément 'linearGradient'.
readonly SVGAnimatedLength x2
Correspond à l'attribut x2 de l'élément 'linearGradient'.
readonly SVGAnimatedLength y2
Correspond à l'attribut y2 de l'élément 'linearGradient'.

L'interface SVGRadialGradientElement

L'interface SVGRadialGradientElement correspond à l'élément 'radialGradient'.


Définition IDL
interface SVGRadialGradientElement : SVGGradientElement { 
  readonly attribute SVGAnimatedLength cx;
  readonly attribute SVGAnimatedLength cy;
  readonly attribute SVGAnimatedLength r;
  readonly attribute SVGAnimatedLength fx;
  readonly attribute SVGAnimatedLength fy;
};

attributs
readonly SVGAnimatedLength cx
Correspond à l'attribut cx de l'élément 'radialGradient' donné.
readonly SVGAnimatedLength cy
Correspond à l'attribut cy de l'élément 'radialGradient' donné.
readonly SVGAnimatedLength r
Correspond à l'attribut r de l'élément 'radialGradient' donné.
readonly SVGAnimatedLength fx
Correspond à l'attribut fx de l'élément 'radialGradient' donné.
readonly SVGAnimatedLength fy
Correspond à l'attribut fy de l'élément 'radialGradient' donné.

L'interface SVGStopElement

L'interface SVGStopElement correspond à l'élément 'stop'.


Définition IDL
interface SVGStopElement : 
                SVGElement,
                SVGStylable { 

  readonly attribute SVGAnimatedNumber offset;
};

attributs
readonly SVGAnimatedNumber offset
Correspond à l'attribut offset de l'élément 'stop' donné.

L'interface SVGPatternElement

L'interface SVGPatternElement correspond à l'élément 'pattern'.


Définition IDL
interface SVGPatternElement : 
                SVGElement,
                SVGURIReference,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGFitToViewBox,
                SVGUnitTypes { 

  readonly attribute SVGAnimatedEnumeration   patternUnits;
  readonly attribute SVGAnimatedEnumeration   patternContentUnits;
  readonly attribute SVGAnimatedTransformList patternTransform;
  readonly attribute SVGAnimatedLength        x;
  readonly attribute SVGAnimatedLength        y;
  readonly attribute SVGAnimatedLength        width;
  readonly attribute SVGAnimatedLength        height;
};

attributs
readonly SVGAnimatedEnumeration patternUnits
Correspond à l'attribut patternUnits de l'élément 'pattern' donné. Prend l'une des constantes définies dans SVGUnitTypes.
readonly SVGAnimatedEnumeration patternContentUnits
Correspond à l'attribut patternContentUnits de l'élément 'pattern' donné. Prend l'une des constantes définies dans SVGUnitTypes.
readonly SVGAnimatedTransformList patternTransform
Correspond à l'attribut patternTransform de l'élément 'pattern' donné.
readonly SVGAnimatedLength x
Correspond à l'attribut x de l'élément 'pattern' donné.
readonly SVGAnimatedLength y
Correspond à l'attribut y de l'élément 'pattern' donné.
readonly SVGAnimatedLength width
Correspond à l'attribut width de l'élément 'pattern' donné.
readonly SVGAnimatedLength height
Correspond à l'attribut height de l'élément 'pattern' donné.