Gradientes radiales

facebook-svg gplus-svg twitter-svg

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

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.



 
  
   
   
  
 
 

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.

Si el valor de gradientUnits es objectBoundingBox, el sistema de coordenadas se basa en el tamaño 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 elemento referenciado. 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 radialGradient gradientUnits by Gabi (@enxaneta) on CodePen.