SVG
Gradientes

Android Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP Python Language
Buscar..


Parámetros

común definición
gradientUnits El sistema de coordenadas de los atributos de gradiente. Ya sea objectBoundingBox o userSpaceOnUse
gradientTransform La transformación para aplicar a los contenidos de gradiente.
Método de propagación Define lo que sucede fuera de los límites del gradiente. O bien el pad, reflexionar o repetir
xlink: href enlace a otro gradiente que proporciona atributos o contenido
------ ------
Gradiente lineal Definición
------ ------
x1 define el vector gradiente
x2 ver x1
y1 ver x1
y2 ver x1
------ ------
Gradiente radial Definición
------ ------
cx la coordenada x del centro del gradiente externo
cy la coordenada y del centro del gradiente externo
r El radio exterior del gradiente. La ubicación de una parada del 100%.
fx La coordenada x del centro de gradiente interno. La ubicación de una parada del 0%.
fy La ubicación y del centro de gradiente interno. La ubicación de una parada del 0%.

Observaciones

SVG distingue entre mayúsculas y minúsculas, así que recuerde usar una G mayúscula en el medio.

gradiente lineal

<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>

RadialGradiente

<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
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow