SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML. Es un valor definido dentro del elemento degradado. Este valor indica el color y la posición que se utilizará dentro del elemento principal.
Sintaxis:
<stop offset="" stop-color="" stop-opacity="" />
Atributos:
- offset: indica la distancia en la que se coloca la parada de gradiente a lo largo del vector de gradiente.
- stop-color: Indica el color a utilizar en el punto de parada.
- stop-opacity: Indica el valor alfa u opacidad a utilizar en el punto de parada. El valor predeterminado es 1.
Ejemplo 1:
<!DOCTYPE html> <html> <body> <svg width="300" height="300" viewBox="0 0 100 100"> <defs> <radialGradient id="gradient"> <stop offset="20%" stop-color="gold" stop-opacity="0.5" /> <stop offset="90%" stop-color="rgb(0, 0, 100)" stop-opacity="0.5" /> <stop offset="70%" stop-color="rgb(100, 200, 0)" stop-opacity="0.7" /> </radialGradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" style=" stroke: black;" /> <rect x="15" y="15" width="70%" height="70%" fill="url(#gradient)" /> <text fill="Green" font-size="6" font-family="Verdana" x="27" y="52">GeeksForGeeks</text> </svg> </body> </html>
Producción:
Ejemplo 2:
<!DOCTYPE html> <html> <body> <svg width="300" height="300" viewBox="0 0 100 100"> <defs> <radialGradient id="gradient"> <stop offset="10%" stop-color="red" stop-opacity="0.4" /> <stop offset="50%" stop-color="gold" stop-opacity="0.7" /> <stop offset="100%" stop-color="shadow" stop-opacity="0.7" /> </radialGradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" style=" stroke: black;" /> <rect x="15" y="15" width="70%" height="70%" fill="url(#gradient)" /> </svg> </body> </html>
Producción:
Ejemplo 3:
<!DOCTYPE html> <html> <body> <svg width="300" height="300" viewBox="0 0 100 100"> <defs> <radialGradient id="gradient"> <stop offset="10%" stop-color="gold" stop-opacity="0.2" /> <stop offset="50%" stop-color="red" stop-opacity="0.3" /> <stop offset="0%" stop-color="shadow" stop-opacity="0.4" /> <stop offset="100%" stop-color="rgb(0, 300, 100)" stop-opacity="0.7" /> <stop offset="10%" stop-color="rgb(0, 300, 0)" stop-opacity="0.7" /> </radialGradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" style=" stroke: black;" /> <rect x="15" y="15" width="70%" height="70%" fill="url(#gradient)" /> </svg> </body> </html>
Producción:
Ejemplo 4:
<!DOCTYPE html> <html> <body> <svg height="200" width="200"> <defs> <linearGradient id="gradient"> <stop offset="10%" stop-color="rgb(20, 200, 0)" stop-opacity="0.4" /> <stop offset="95%" stop-color="rgb(200, 200, 0)" stop-opacity="0.4" /> </linearGradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" style=" stroke: black;" /> <rect x="30" y="30" width="70%" height="70%" fill="url(#gradient)" /> <text fill="Green" font-size="20" font-family="Verdana" x="23" y="100"> GeeksForGeeks </text> </svg> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por epistler_999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA