Dégradé SVG - Radioactif
SVG Radial Gradient - L'élément <radialGradient>
<radialGradient> Les balises
<radialGradient> doivent être imbriquées dans <defs>. La balise <defs> est l'abréviation de définitions, qui peuvent définir des éléments spéciaux tels que des dégradés.
Exemple 1
Définir un dégradé radial du blanc à l'ellipse bleue :
Voici le code SVG :
Exemple
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" /> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" /> </radialGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> </svg> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Pour les utilisateurs d'Opera : Afficher Fichier SVG (clic droit sur la source d'aperçu graphique SVG).
Analyse du code :
<radialGradient> L'attribut id de la balise peut définir un nom unique pour le dégradé
Le cercle le plus extérieur défini par les attributs CX, CY et r et le cercle le plus intérieur défini par Fx et Fy
La gamme de couleurs dégradées peut être composée de deux ou plus composition des couleurs. Chaque couleur est spécifiée par une balise <stop> L'attribut offset permet de définir le début et la fin du dégradé
L'attribut fill lie l'élément ellipse à ce dégradé
Exemple 2
Une autre ellipse définissant un dégradé radial du blanc au bleu :
Voici le code SVG :
Exemple
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" /> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" /> </radialGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> </svg> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Pour les utilisateurs d'Opera : affichez le fichier SVG (clic droit sur la source d'aperçu graphique SVG).
