SVG <stop> Element
Last Updated :
31 Mar, 2022
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. It is a defined value within the gradient element. This value tells the color and position to be used within the parent element.
Syntax:
<stop offset="" stop-color="" stop-opacity="" />
Attributes:
- offset: It tells the distance where the gradient stop is positioned along the gradient vector.
- stop-color: It tells color to be used at the stop point.
- stop-opacity: It tells the alpha value or opacity to be used at the stop point. Default value is 1.
Example 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 >
|
Output:
Example 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 >
|
Output:
Example 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 >
|
Output:
Example 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 >
|
Output:
Share your thoughts in the comments
Please Login to comment...