SVG
Les dégradés

Android Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP Python Language
Recherche…


Paramètres

commun définition
gradientUnits le système de coordonnées des attributs de dégradé. Soit objectBoundingBox ou userSpaceOnUse
gradientTransform la transformation à appliquer au contenu du gradient
spreadMethod définit ce qui se passe en dehors des limites du gradient. Soit pad, réfléchir ou répéter
xlink: href lien vers un autre dégradé qui fournit des attributs ou du contenu
------ ------
Gradient linéaire Définition
------ ------
x1 définit le vecteur de dégradé
x2 voir x1
y1 voir x1
y2 voir x1
------ ------
Dégradé radial Définition
------ ------
cx la coordonnée x du centre de dégradé externe
cy la coordonnée y du centre de dégradé externe
r le rayon extérieur du dégradé. L'emplacement d'un arrêt à 100%
fx la coordonnée x du centre de dégradé interne. L'emplacement d'un arrêt de 0%
fy l'emplacement y du centre de gradient interne. L'emplacement d'un arrêt de 0%

Remarques

SVG est sensible à la casse, alors n'oubliez pas d'utiliser un G majuscule au centre.

gradient linéaire

<svg>
  <defs>
        <linearGradient id='g' y1="100%" x2="100%">
            <stop offset='0%' stop-color='yellow' />
            <stop offset='100%' stop-color='green' />
        </linearGradient>
    </defs>
    <rect width='100%' height='100%' fill='url(#g)'/>
</svg>

radialGradient

<svg>
  <defs>
    <radialGradient id="g">
      <stop offset="10%" stop-color="green" />
      <stop offset="90%" stop-color="white" />
    </radialGradient>
  </defs>

  <rect width='100%' height='100%' fill='url(#g)'/>
</svg>


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow