w3.unpocodetodo.info
Además de colores sólidos, en el SVG podemos crear degradados lineales y radiales. Para esto utilizamos los siguientes elementos:
<linearGradient> para crear gradientes lineales
<radialGradient> para generar gradientes radiales
<stop> se utiliza para especificar los colores y/o las transparencias utilizadas para el gradiente y donde estos acaban.
Atributos de los elementos <linearGradient> y <radialGradient>
| Atributo | Ejemplo | Descripcion |
|---|---|---|
| gradientTransform | gradientTransform = "rotate(30 .5 .5)" | define la transformación aplicada al gradiente. |
| cx y cy | cx=".25" o cx="25%" |
número de 0 a 1 o porcentajes cx y cy – que definen las coordenadas del centro de la elipse del gradiente radial. |
| r | r=".25" o r="25%" |
número de 0 a 1 o porcentajes r – define el radio de la circunferencia circunscrita a la elipse del gradiente radial. |
| fx y fy | fx=".95" | número de 0 a 1 fx y fy define el punto focal para el gradiente radial. |
| spreadMethod | spreadMethod = "reflect" | pad | reflect | repeat |
Atributos del elemento <stop>
| Atributo | Ejemplo | Descripcion |
|---|---|---|
| offset | offset="50%" | porcentaje |
| opacity | opacity = .5 | número de 0 a 1 |
| stop-color | stop-color="#6ab150" | nombre | hex | rgb | hsl | rgba | hsla |
| stop-opacity | stop-opacity="0.5"/td> | número de 0 a 1 |
Degradados lineales con linearGradient
En el SVG podemos crear gradientes o degradados lineales utilizando el elemento <linearGradient>.
El elemento <linearGradient> tiene que aparecer dentro del elemento <defs> ( definiciones ). Los elementos que aparecen definidos dentro del elemento
<defs> no aparecen en pantalla, pero pueden ser referenciados más tarde. Para esto normalmente se los asigna una identificación ( id ).
En el siguiente ejemplo el <linearGradient> tiene asignado el id="linearGradient".
Utilizamos este id para referenciar el degradado, y poder utilizarlo como valor del atributo fill.
<linearGradient id="linearGradient" >
. . . . . . .
<rect fill ="url(#linearGradient)" width ="250" height ="100"/>
Dentro del elemento <linearGradient> aparecen anidados cinco elementos <stop> que controlan los colores utilizados en el degradado ( stop-color ), y hasta donde se extienden ( offset ).
El atributo gradientTransform
El elemento <linearGradient> controla la dirección del degradado, y esta dirección puede ser modificada utilizando el atributo gradientTransform.
En el siguiente ejemplo el atributo gradientTransform gira el degradado unos 30° en el sentido del reloj.
gradientTransform="rotate(30 .5 .5)"
La rotación tiene lugar alrededor del centro del rectángulo.
gradientTransform="rotate(30 .5 .5)"
Más acerca de las funciones de transformación conocidas: translate, rotate, scale....
Opacidad con stop-opacity
Con el elemento <stop>, además del atributo stop-color, podemos utilizar también stop-opacity.
El atributo stop-opacity controla la opacidad / transparencia del color de relleno, puede tomar valores entre
0 ( totalmente transparente ) y 1 ( totalmente opaco ) y crea gradientes ( lineales o radiales ) de transparencias.
El elemento radialGradient
En el siguiente ejemplo el elemento <radialGradient> es utilizado para generar un degradado radial.
Exactamente como en el caso del gradiente lineal, el elemento <radialGradient> tiene que aparecer dentro del elemento <defs>, y tiene que tener asignado un id
para poder ser referenciado y reutilizado más tarde.
<radialGradient id="radialGradient" >
. . . . . . .
<rect fill= "url(#radialGradient)" width= "250" height= "200" />
Dentro del elemento <radialGradient> aparecen anidados dos elementos <stop> que controlan los colores utilizados en el degradado ( stop-color ), y hasta donde se extienden ( offset ).
Los atributos fx y fy de radialGradient
Los atributos fx y fy se utilizan junto con el elemento <radialGradient> para definir el foco del gradiente radial.
El valor de los atributos fx y fy es un numero de 0 a 1 y si no están definidos el foco coincide por defecto con el centro de la elipse.
Los atributos cx, cy, r y spreadMethod
Podemos controlar el tamaño de la elipse del degradado radial utilizando los siguientes atributos:
cx y cy – que definen las coordenadas del centro de la elipse,
r – el radio de la circunferencia circunscrita.
En el siguiente ejemplo además de definir los atributos cx, cy y r vamos a definir también el spreadMethod
El atributo spreadMethod puede tomar 3 valores: pad ( el valor por defecto ), reflect y repeat.
Si spreadMethod = "pad", el último color definido con <stop> llena el resto del trazado.
Si spreadMethod = "reflect", los colores del gradiente se reflectan una y otra vez en el resto del trazado.
Si spreadMethod = "repeat", los colores del gradiente se repiten en el resto del trazado.