El atributo stop-opacity indica el valor alfa u opacidad que se utilizará en el punto de parada. Solo tiene efecto en el elemento <stop> . El valor predeterminado es 1.
Sintaxis:
stop-opacity = opacity-value
Valores de atributo: el atributo stop-opacity acepta los valores mencionados anteriormente y descritos a continuación
- opacity-value: Indica un número entre 0 y 1 o un valor porcentual.
Los siguientes ejemplos ilustran el uso del atributo stop-opacity.
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <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="80%" stop-color="rgb(0, 0, 100)" stop-opacity="0.6"/> <stop offset="70%" stop-color="rgb(100, 200, 0)" stop-opacity="0.8"/> </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="white" font-size="10" x="10" y="52"> GeeksForGeeks </text> </svg> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green; font-size: 25px;"> GeeksforGeeks </h1> <svg height="200" width="200"> <defs> <linearGradient id="gradient"> <stop offset="20%" stop-color="rgb(20, 200, 0)" stop-opacity="0.5"/> <stop offset="80%" stop-color="rgb(200, 200, 0)" stop-opacity="0.5"/> </linearGradient> </defs> <rect width="100%" height="100%" fill="url(#gradient)" style=" stroke: green;"/> <rect x="30" y="30" width="70%" height="70%" fill="url(#gradient)"/> <text fill="Green" y="100" font-size="25"> GeeksForGeeks </text> </svg> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA