SVG - Dégradés
Le dégradé fait référence à une transition en douceur d'une couleur à une autre couleur dans une forme. SVG fournit deux types de dégradés.
Linear Gradients - Représente la transition linéaire d'une couleur à une autre d'une direction à une autre.
Radial Gradients - Représente la transition circulaire d'une couleur à une autre d'une direction à une autre.
Gradients linéaires
Déclaration
Voici la déclaration de syntaxe de <linearGradient>élément. Nous n'avons montré que les principaux attributs.
<linearGradient
gradientUnits ="units to define co-ordinate system of contents of gradient"
gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
x1="x-axis co-ordinate"
y1="y-axis co-ordinate"
x2="x-axis co-ordinate"
y2="y-axis co-ordinate"
spreadMethod="indicates method of spreading the gradient within graphics element"
xlink:href="reference to another gradient" >
</linearGradient>Les attributs
| N ° Sr. | Nom et description |
|---|---|
| 1 | gradientUnits- unités pour définir le système de coordonnées des différentes valeurs de longueur dans le dégradé. Si gradientUnits = "userSpaceOnUse", les valeurs représentent les valeurs dans le système de coordonnées utilisateur actuel en place au moment où l'élément de dégradé est utilisé. Si patternContentUnits = "objectBoundingBox", les valeurs représentent des valeurs en fractions ou en pourcentages de la boîte englobante sur l'élément de référence en place au moment où l'élément dégradé est utilisé. La valeur par défaut est userSpaceOnUse. |
| 2 | x1- coordonnée en abscisse du vecteur gradient. Defeault est 0. |
| 3 | y1- coordonnée sur l'axe des y du vecteur gradient. La valeur par défaut est 0. |
| 4 | x2- coordonnée en abscisse du vecteur gradient. Defeault est 0. |
| 5 | y2- coordonnée sur l'axe des y du vecteur gradient. La valeur par défaut est 0. |
| 6 | spreadMethod- indique la méthode de diffusion du dégradé dans l'élément graphique. La valeur par défaut est «pad». |
| sept | xlink:href - utilisé pour désigner un autre dégradé. |
Exemple
testSVG.htm<html>
<title>SVG Linear Gradient</title>
<body>
<h1>Sample SVG Linear Gradient</h1>
<svg width="600" height="600">
<defs>
<linearGradient id="sampleGradient">
<stop offset="0%" stop-color="#FF0000" />
<stop offset="100%" stop-color="#00FFF00" />
</linearGradient>
</defs>
<g>
<text x="30" y="50" >Using Linear Gradient: </text>
<rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
fill="url(#sampleGradient)" />
</g>
</svg>
</body>
</html>Un élément <linearGradient> défini comme sampleGradient.
Dans linearGradient, deux décalages sont définis avec deux couleurs.
dans l'élément rect, dans l'attribut fill, l'url du dégradé est spécifiée pour remplir le rectangle avec le dégradé créé précédemment.
Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.
Dégradés radiaux
Déclaration
Voici la déclaration de syntaxe de <radialGradient>élément. Nous n'avons montré que les principaux attributs.
<radialGradient
gradientUnits ="units to define co-ordinate system of contents of gradient"
gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
cx="x-axis co-ordinate of center of circle."
cy="y-axis co-ordinate of center of circle."
r="radius of circle"
fx="focal point for the radial gradient"
fy="focal point for the radial gradient"
spreadMethod="indicates method of spreading the gradient within graphics element"
xlink:href="reference to another gradient" >
</radialGradient>Les attributs
| N ° Sr. | Nom et description |
|---|---|
| 1 | gradientUnits- unités pour définir le système de coordonnées des différentes valeurs de longueur dans le dégradé. Si gradientUnits = "userSpaceOnUse", les valeurs représentent les valeurs dans le système de coordonnées utilisateur actuel en place au moment où l'élément de dégradé est utilisé. Si patternContentUnits = "objectBoundingBox", les valeurs représentent des valeurs en fractions ou en pourcentages de la boîte englobante sur l'élément de référence en place au moment où l'élément dégradé est utilisé. La valeur par défaut est userSpaceOnUse. |
| 2 | cx- coordonnée en abscisse du centre du plus grand cercle du vecteur gradient. Defeault est 0. |
| 3 | cy- coordonnée sur l'axe des y du centre du plus grand cercle du vecteur gradient. La valeur par défaut est 0. |
| 4 | r- rayon du centre du plus grand cercle du vecteur de gradient. Defeault est 0. |
| 5 | fx- point focal du gradient radial. La valeur par défaut est 0. |
| 6 | fy- point focal du gradient radial. La valeur par défaut est 0. |
| sept | spreadMethod- indique la méthode de diffusion du dégradé dans l'élément graphique. La valeur par défaut est «pad». |
| 8 | xlink:href - utilisé pour désigner un autre dégradé. |
Exemple
testSVG.htm<html>
<title>SVG Radial Gradient</title>
<body>
<h1>Sample SVG Radial Gradient</h1>
<svg width="600" height="600">
<defs>
<radialGradient id="sampleGradient">
<stop offset="0%" stop-color="#FF0000" />
<stop offset="100%" stop-color="#00FFF00" />
</radialGradient>
</defs>
<g>
<text x="30" y="50" >Using Radial Gradient: </text>
<rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
fill="url(#sampleGradient)" />
</g>
</svg>
</body>
</html>Un élément <radialGradient> défini comme sampleGradient.
Dans radialGradient, deux décalages sont définis avec deux couleurs.
dans l'élément rect, dans l'attribut fill, l'url du dégradé est spécifiée pour remplir le rectangle avec le dégradé créé précédemment.
Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.