SVG Gradient se usa para suavizar la transición de un color a otro color dentro de una forma. SVG proporciona dos tipos de degradados.
- Gradientes Lineales: Transición de una dirección a otra.
- Gradientes radiales: transición circular de un color a otro de una dirección a otra.
Gradientes lineales: la función CSS linear-gradient() se usa para crear una imagen que consiste en una transición progresiva entre dos o más colores a lo largo de una línea recta.
Sintaxis:
<linearGradient
GradientUnits =”unidades para definir el contenido del gradiente”
gradientTransform = “definición de una transformación adicional
del sistema de coordenadas de gradiente al sistema de coordenadas de destino”x1=”coordenada del eje x”
y1=”coordenada del eje y”
x2=”coordenada del eje x”
y2=”coordenada del eje y”spreadMethod=”indica el método de esparcir el degradado dentro del elemento gráfico”
xlink:href=”referencia a otro degradado” >
</linearGradient>
Atributo:
- GradientUnits: Unidades para definir el sistema de coordenadas para los distintos valores de longitud dentro del degradado.
- x1: coordenada del eje x del vector gradiente.
- y1: coordenada del eje y del vector gradiente.
- x2: coordenada del eje x del vector gradiente.
- y2: coordenada del eje y del vector gradiente.
- spreadMethod: Indica el método de esparcir el degradado dentro del elemento gráfico. El valor predeterminado es ‘almohadilla’.
- xlink:href: se usa para referirse a otro gradiente.
Ejemplo:
<!DOCTYPE html> <html> <body> <svg width="400" height="400"> <defs> <linearGradient id="GFGGradient"> <stop offset="0%" stop-color="white" /> <stop offset="100%" stop-color="green" /> </linearGradient> </defs> <g> <rect x="100" y="100" width="200" height="200" stroke="black" stroke-width="3" fill="url(#GFGGradient)" /> </g> </svg> </body> </html>
Producción:
Gradientes radiales: la función CSS radial-gradient() se usa para crear una imagen que consiste en una transición progresiva entre dos o más colores que irradian desde un origen. Su forma puede ser un círculo o una elipse.
Sintaxis:
<radialGradient
GradientUnits = «unidades para definir el sistema de coordenadas de contenido de gradiente»
gradientTransform = «definición de una transformación adicional
del sistema de coordenadas de gradiente en el sistema de coordenadas de destino»cx = «coordenada del eje x del centro del círculo».
cy = «coordenada del eje y del centro del círculo».r = «radio del círculo»
fx=”punto focal para el gradiente radial”
fy=”punto focal para el gradiente radial”spreadMethod=”indica el método de esparcir el
degradado dentro del elemento gráfico”
xlink:href=”referencia a otro degradado” >
</radialGradient>
Atributo:
- GradientUnits: Unidades para definir el sistema de coordenadas para los distintos valores de longitud dentro del degradado.
- cx: coordenada en el eje x del centro
- cy: coordenada del eje y del centro
- r: Radio del centro.
- fx: Punto focal del degradado radial.
- fy: punto focal del gradiente radial.
- spreadMethod: Indica el método de esparcir el degradado dentro del elemento gráfico. El valor predeterminado es ‘almohadilla’.
- xlink:href: se usa para referirse a otro gradiente.
Ejemplo:
<!DOCTYPE html> <html> <body> <svg width="400" height="400"> <defs> <radialGradient id="GFGGradient"> <stop offset="0%" stop-color="white" /> <stop offset="100%" stop-color="green" /> </radialGradient> </defs> <g> <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3" fill="url(#GFGGradient)" /> </g> </svg> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA