Gradientes lineales

facebook-svg gplus-svg twitter-svg

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
gradient
Transform
gradientTransform = "rotate(30 .5 .5)" define la transformación aplicada al gradiente.
x1,y1,x2,y2 x1=".25"
o
x1="25%"
número de 0 a 1 o porcentajes
definen la dirección del gradiente lineal desde x1,y1 hasta x2,y2
gradientUnits gradientUnits="objectBoundingBox" gradientUnits="objectBoundingBox | userSpaceOnUse"
spread
Method
spreadMethod = "reflect" spreadMethod = "pad | reflect | repeat"
atributo utilizado para crear crear gradientes lineales o radiales repetitivos en SVG.
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.

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 pasa alrededor del centro del rectángulo.

gradientTransform="rotate(30 .5 .5)"



 
  
      
      
        
 
 

Una aplicación para entender el atributo gradientTransform

See the Pen linearGradient + gradientTransform by Gabi (@enxaneta) on CodePen.

Más acerca de las funciones de transformación conocidas: translate, rotate, scale....

Los atributos x1,y1,x2 e y2

Para definir la dirección del gradiente lineal, también podemos utilizar los atributos x1,y1,x2 e y2.  Si pensamos que la dirección del degradado es una línea con un punto de partida (x1,y1) y un punto final (x2,y2) podemos controlar la dirección del degradado modificando las coordenadas de estos dos puntos.

El valor de los atributos x1,y1,x2 e y2 puede ser un número o un porcentaje.

 <linearGradient x1 = "0%" y1 = "20%" x2 = "100%" y2 = "81%" >
     <stop offset = "0%" stop-color = "hsl(120,100%,30%)" />
     <stop offset = "50%" stop-color = "white" />
     <stop offset = "100%" stop-color = "hsl(320,100%,50%)" />
 </linearGradient>

Una aplicación para entender los atributos x1,y1,x2 e y2

See the Pen SVG linearGradient + x1,y1,x2,y2 by Gabi (@enxaneta) on CodePen.

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

El atributo  gradientUnits define el sistema de coordenadas para los atributos x1,y1,x2 e y2 de <linearGradient> y cx,cy,fx,fy y r de <radialGradient>. El valor por defecto del atributo gradientUnits es objectBoundingBox.

¿Porque es importante? Anteriormente hemos definido los atributos x1,y1,x2 e y2 de <linearGradient> en porcentajes. ¿Porcentajes de que?

Si el valor de gradientUnits es objectBoundingBox, el sistema de coordenadas se basa en el tamaño de la caja delimitadora ( bounding box ) del trazado - el rectángulo <rect> en este caso. De lo contrario, si gradientUnits="userSpaceOnUse" el sistema de coordenadas se basa en el tamaño del elemento padre que define un nuevo sistema de coordenadas - el elemento SVG en este caso. Si todavía no queda muy claro mire este ejemplo, edítelo en codepen.io, y cambie todo lo que le apetezca en el código.

See the Pen SVG gradientUnits by Gabi (@enxaneta) on CodePen.

El atributo spreadMethod. ¿Repetimos?

Podemos crear gradientes lineales repetitivos en SVG utilizando 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.

See the Pen SVG spreadMethod by Gabi (@enxaneta) on CodePen.