El atributo stop-color se usa para indicar el color que se usará en el punto de parada de un degradado. Sólo tiene efecto sobre el elemento <stop>. El valor predeterminado de este atributo es «negro».
Sintaxis:
stop-color = currentcolor | color | icccolor
Valores de atributo: este atributo acepta los valores mencionados anteriormente y descritos a continuación:
- currentcolor: Denota el color de relleno actual.
- color: Indica un valor de color.
- icccolor: Indica un perfil de color ICC.
Los siguientes ejemplos ilustran el uso del atributo stop-color .
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<svg viewBox="0 0 50 10"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="geek">
<stop offset="25%"
stop-color="lightgreen" />
<stop offset="75%"
stop-color="green" />
</linearGradient>
</defs>
<circle cx="5" cy="5" r="5"
fill="url('#geek')" />
</svg>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <svg height="200" width="200"> <defs> <linearGradient id="gradient"> <stop offset="20%" stop-color="rgb(20, 200, 0)" stop-opacity="0.4" /> <stop offset="80%" stop-color="rgb(200, 200, 0)" stop-opacity="0.4" /> </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