Gradiente lineal SVG
Descripción de los degradados SVG
Un degradado es una transición fluida de un color a otro. Es posible aplicar múltiples transiciones de color al mismo elemento.
Existen dos tipos principales de degradados en SVG:
- lineal
- radial
El elemento <linearGradient>
El elemento <linearGradient> especifica degradados lineales que rellenan elementos gráficos. Debe estar anidado dentro de una etiqueta <defs> que contenga la definición de elementos específicos, como los degradados.
Los degradados lineales pueden ser horizontales, verticales o angulares:
- Degradados horizontales: y1 e y2 son iguales, y x1 y x2 difieren.
- Degradados verticales: x1 y x2 son iguales, y y1 y y2 difieren.
- Degradados angulares: x1 y x2 varían, y y1 y y2 también difieren.
peligro
Nunca confunda un degradado lineal SVG con la propiedad CSS radial-gradient. Los degradados CSS se aplican a elementos HTML, mientras que los degradados SVG se aplican a elementos SVG.
Ejemplo del elemento <linearGradient> para crear una elipse con un degradado lineal horizontal:
Ejemplo del elemento <linearGradient> para crear una elipse con un degradado lineal horizontal
<!DOCTYPE html>
<html>
<body>
<svg height="200" width="300">
<defs>
<linearGradient id="ellipse" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="150" cy="90" rx="105" ry="65" fill="url(#ellipse)" />
</svg>
</body>
</html>Ejemplo del elemento <linearGradient> para crear una elipse con un degradado lineal vertical:
Ejemplo del elemento <linearGradient> para crear una elipse con un degradado lineal vertical
<!DOCTYPE html>
<html>
<body>
<svg height="300" width="400">
<defs>
<linearGradient id="ellipse" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="250" cy="100" rx="110" ry="70" fill="url(#ellipse)" />
</svg>
</body>
</html>Atributos
| Valor | Descripción |
|---|---|
| gradientUnits | Este atributo especifica el sistema de coordenadas para los atributos x1, x2, y1, y2. Valores: userSpaceOnUse, objectBoundingBox. |
| gradientTransform | Este atributo proporciona una transformación adicional al sistema de coordenadas del degradado. |
| href | Este atributo especifica una referencia a otro elemento <linearGradient>. |
| spreadMethod | Este atributo especifica cómo se comporta el degradado si comienza o termina dentro de los límites de la forma que lo contiene. Valores: pad, repeat, reflect. |
| x1 | Este atributo especifica la coordenada x del punto de inicio del vector del degradado a lo largo del cual se dibuja el degradado lineal. |
| x2 | Este atributo especifica la coordenada x del punto final del vector del degradado a lo largo del cual se dibuja el degradado lineal. |
| y1 | Este atributo especifica la coordenada y del punto de inicio del vector del degradado a lo largo del cual se dibuja el degradado lineal. |
| y2 | Este atributo especifica la coordenada y del punto final del vector del degradado a lo largo del cual se dibuja el degradado lineal. |
El elemento SVG <linearGradient> también admite los Atributos globales y los Atributos de eventos.
Práctica
¿Cuáles son los usos de los atributos 'x1', 'y1', 'x2' e 'y2' en un degradado lineal SVG en HTML?