El elemento SVG <linearGradient> permite al desarrollador definir degradados lineales para aplicar elementos SVG. Permite una transición suave de un color a otro. Esta es la técnica más fiable.
Los gradientes lineales se pueden definir como gradientes verticales, angulares u horizontales:
- Los gradientes verticales se crean cuando x1 y x2 son iguales y y1 e y2 diferentes.
- Los gradientes angulares se crean cuando x1 y x2 difieren y y1 e y2 son diferentes.
- Los gradientes horizontales se crean cuando y1 e y2 son iguales y x1 y x2 diferentes.
Características:
- Usando el gradiente predeterminado de izquierda a derecha, aunque eso se puede cambiar fácilmente; Te mostraré cómo en un momento.
- Los controles del elemento de parada para degradados son similares a los productos de Adobe y Photoshop.
- Las posiciones de compensación pueden ser valoradas de 0 a 1 o como porcentajes de 0% a 100%. Representaba el color irradiado por la estructura.
- Los colores a utilizar en el degradado se pueden definir a partir de cualquiera de los colores CSS.
Sintaxis:
El atributo id de la etiqueta <linearGradient> debe ser único para el degradado.
Los atributos x1, x2, y1 e y2 de la etiqueta <linearGradient> representarán la posición inicial y final del degradado.
<linearGradient id="Geek1" x1="2%" y1="1%" x2="100%" y2="1%">
La gama de colores de un degradado puede estar formada por dos o más tipos de colores. Se utiliza una etiqueta stop> para especificar cada color. El atributo de compensación se usa para representar desde dónde comenzará y terminará el color degradado.
<stop offset="0%"
style="stop-color:rgb(0,255,0);stop-opacity:1"/>
El atributo de relleno vincula el elemento de elipse al degradado.
<ellipse cx="190" cy="70"
rx="85" ry="55" fill="url(#Geek1)"/>
Ejemplo 1: definición de un degradado lineal de elipse de verde a azul.
Dentro de las etiquetas <linearGradient> hay dos paradas de color definidas por elementos <stop>. La primera parada de color establece un color azul con una compensación del 0 % y la segunda establece un color verde con una compensación del 100 %.
HTML
<!DOCTYPE html> <html> <svg height="150" width="400"> <defs> <linearGradient id="Geek1" x1="2%" y1="1%" x2="100%" y2="1%"> <stop offset="0%" style= "stop-color:rgb(34, 221, 81);stop-opacity:1" /> <stop offset="100%" style= "stop-color:rgb(11, 22, 172);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#Geek1)" /> </svg> </html>
Producción:
verde a azul
Ejemplo 2: Definición de un degradado lineal rectangular de rojo a negro.
El degradado lineal dentro de las etiquetas <defs> le da al degradado una identificación de lineal. Luego, la propiedad de relleno de rectángulo hace referencia a la identificación.
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksForGeeks</h1> <svg width="600" height="600"> <defs> <linearGradient id="Geek1"> <stop offset="0%" stop-color="#FF0000"/> <stop offset="100%" stop-color="#00FFF00"/> </linearGradient> </defs> <g> <text x="30" y="50">GeeksForGeeks: </text> <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3" fill="url(#Geek1)"/> </g> </svg> </body> </html>
Producción:
Navegadores compatibles: los siguientes navegadores son compatibles con este elemento SVG:
- Cromo
- Borde
- Firefox
- explorador de Internet
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por ayushcoding100 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA