Gradiente lineal SVG

Los gradientes SVG deben definirse dentro de la etiqueta <defs>.

Gradiente SVG

El gradiente es una transición suave de un color a otro. Además, se puede aplicar una transición de múltiples colores al mismo elemento.

En SVG, hay dos tipos principales de gradientes:

  • Gradiente lineal
  • Gradiente radiactivo

Gradiente lineal

La etiqueta <linearGradient> se utiliza para definir gradientes lineales en SVG.

La etiqueta <linearGradient> debe estar anidada dentro de la etiqueta <defs>. La etiqueta <defs> es la abreviatura de definitions y se utiliza para definir elementos especiales como los gradientes.

El gradiente lineal se puede definir como horizontal, vertical o en forma de ángulo:

  • Cuando y1 y y2 son iguales, y x1 y x2 son diferentes, se puede crear un gradiente horizontal
  • Cuando x1 y x2 son iguales, y y1 y y2 son diferentes, se puede crear un gradiente vertical
  • Cuando x1 y x2 son diferentes, y y1 y y2 también son diferentes, se puede crear un gradiente en forma de ángulo

Copie el siguiente código en un bloc de notas y guárdelo como "linear1.svg". Coloque este archivo en su directorio web:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#naranja_rojo)"/>
</svg>

Explicación del código:

  • La propiedad id de la etiqueta <linearGradient> puede definir un nombre único para el gradiente
  • La propiedad fill:url(#orange_red) enlaza el elemento ellipse a este gradiente
  • Las propiedades x1, x2, y1, y2 de la etiqueta <linearGradient> definen la posición de inicio y final del gradiente
  • El rango de colores del gradiente puede estar compuesto por dos o más colores. Cada color se especifica mediante una etiqueta <stop>. La propiedad offset se utiliza para definir la posición de inicio y final del gradiente.

Ver ejemplo (gradiente horizontal)

Otro ejemplo:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="naranja_rojo" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#naranja_rojo)"/>
</svg>

Ver ejemplo (gradiente vertical)