Degradados en SVG: lineal y radial
Con ejemplos de codigo
Los degradados en SVG se definen una vez dentro de <defs> y se aplican con fill="url(#id)". Hay dos tipos: lineal y radial.
Degradado lineal
<defs> <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1"> <stop offset="0" stop-color="#6c8cff"/> <stop offset="1" stop-color="#ff6c9c"/> </linearGradient> </defs> <rect width="100" height="100" fill="url(#g1)"/>
x1,y1 -> x2,y2 definen la direccion (de 0 a 1). Cada stop es una parada de color con su offset.
Degradado radial
<radialGradient id="g2"> <stop offset="0" stop-color="#fff"/> <stop offset="1" stop-color="#6c8cff"/> </radialGradient>
Va del centro hacia afuera. Util para brillos y esferas.
Varias paradas
Puedes poner mas de dos stop para transiciones multicolor. El offset va de 0 a 1 (o en porcentaje).
Transparencia en el degradado
Usa stop-opacity en una parada para que el color se desvanezca a transparente.
Reutilizar
Un mismo gradiente (por su id) puede aplicarse a varias formas. Definelo una vez en <defs>.
Hazlo visual
En svgdesk defines colores de relleno y borde, y puedes pegar el bloque de degradado en el panel de codigo para verlo al instante.