Un gradient est une transition douce d'une couleur à une autre couleur. En plus du ce, plusieurs transitions de couleur peuvent être appliquées au même élément.

Il y a principalement deux types de gradients dans SVG :

• Gradients linéaires
• Gradients radiaux

L'étiquette de <linearGradient> est employée pour définir des gradients linéaires de SVG.

L'étiquette de <linearGradient> doit être nichée dans l'étiquette de <defs>. L'étiquette de <defs> est abréviation la définition et elle permet la définition des éléments spéciaux tels que des gradients.

Des gradients linéaires peuvent être définis en tant que gradients verticaux, horizontaux ou angulaires :

• Des gradients verticaux sont créés quand x1 et x2 sont égaux et y1 et y2 sont différés.

• Des gradients horizontaux sont créés quand y1 et y2 sont égaux et x1 et x2 sont différés.

• Des gradients angulaires sont créés quand x1 et x2 diffèrent et y1 et y2 sont différés.

Copy le code suivant dans le bloc-notes et économiser le dossier en tant que « linear.svg ». Placer le dossier dans votre annuaire de Web seulement :

• L'attribut d'identification de l'étiquette de <linearGradient> définit un nom unique pour les gradients

• La suffisance : la propriété d'URL (#orange_red) lie l'élément d'ellipse aux gradients

• Les x1, x2, y1, les attributs y2 de l'étiquette de <linearGradient> définissent commencer et la position de fin des gradients

• La gamme de couleur pour un gradient peut se composer de deux couleurs ou plus. Chaque couleur est indiquée avec l'étiquette de <stop>. L'attribut excentré est employé pour définir où la couleur de gradient commencent et l'extrémité