Linea de Codigo

Dos buenos ejemplos para empezar aprendiendo de gradientes en SVG son Circulo con Gradiente Lineal y Gradiente Lineal Vertical. Los cuales explican como hacer gradientes lineales horizontales y verticales respectivamente. A si que lo que nos queda por explicar es como hacer un gradiente lineal angular en SVG

Cuando decimos angular, lo que queremos decir es que el vector que representa la transición de los colores tiene un cierto ángulo. Dentro de la definición del gradiente lineal, la cual hacemos mediante la etiqueta <linearGradient>, no encontramos forma de definir el angulo del vector. Para poder llevar a cabo esto, solo tenemos las coordenadas de inicio y de fin del vector.

Y la forma de conseguir un angulo es que tanto las coordenadas x1 y x2, como las coordenadas y1 e y2 sean diferentes entre si.

Así, por ejemplo, un angulo de 90 grados (noroeste) lo podríamos conseguir con la siguiente secuencia de coordenadas:

x1=0 y1=100 x2=100 y2=0

Quedándonos el siguiente código:

 
<linearGradient id="gradiente_angular" x1="0%" y1="100%" x2="100%" y2="0%">
 <stop offset="20%" stop-color="#f00"/>
 <stop offset="80%" stop-color="#ff0"/>
</linearGradient>
 

Visualizar el ejemplo | Descargar el código