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'.
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é.
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 :
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>
|
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
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 :
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>
 |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
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 :
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'.
La propriété 'stop-opacity' définit l'opacité d'un arrêt de dégradé donné.
| 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 :
<stop offset="0" stop-color="white"/> <stop offset=".2" stop-color="red"/> <stop offset=".2" stop-color="blue"/> <stop offset="1" stop-color="black"/>celle-ci produit approximativement le même effet que :
<stop offset="0" stop-color="white"/> <stop offset=".1999999999" stop-color="red"/> <stop offset=".2" stop-color="blue"/> <stop offset="1" stop-color="black"/>C'est un dégradé qui va progressivement du blanc vers le rouge, puis change brusquement du rouge vers le bleu et va progressivement du bleu vers le noir.
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*width, y + 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 :
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>
 |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
Les interfaces suivantes sont définies ci-dessous : SVGGradientElement, SVGLinearGradientElement, SVGRadialGradientElement, SVGStopElement, SVGPatternElement.
L'interface SVGGradientElement est une interface de base utilisée par SVGLinearGradientElement et SVGRadialGradientElement.
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;
};
| 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. |
L'interface SVGLinearGradientElement correspond à l'élément 'linearGradient'.
interface SVGLinearGradientElement : SVGGradientElement {
readonly attribute SVGAnimatedLength x1;
readonly attribute SVGAnimatedLength y1;
readonly attribute SVGAnimatedLength x2;
readonly attribute SVGAnimatedLength y2;
};
L'interface SVGRadialGradientElement correspond à l'élément 'radialGradient'.
interface SVGRadialGradientElement : SVGGradientElement {
readonly attribute SVGAnimatedLength cx;
readonly attribute SVGAnimatedLength cy;
readonly attribute SVGAnimatedLength r;
readonly attribute SVGAnimatedLength fx;
readonly attribute SVGAnimatedLength fy;
};
L'interface SVGStopElement correspond à l'élément 'stop'.
interface SVGStopElement :
SVGElement,
SVGStylable {
readonly attribute SVGAnimatedNumber offset;
};
L'interface SVGPatternElement correspond à l'élément 'pattern'.
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;
};