The <defs> in SVG is used whenever we want a particular element to render only when required or when it is called. objects that are created inside <defs> element are not rendered directly they are needed to be called by <use> element to render them on the browser.
Syntax:
<defs></defs>
Property values: It does not have any property values.
Below given are a few examples of the above function.
Example 1: When <defs> is not called thus it is not executed.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Document</ title >
</ head >
< style >
svg{
background-color: green;
}
</ style >
< body >
< h2 >
No Output only svg of size 100*100 is visible< br >
and no circle stroke will be rendered</ h2 >
< svg width = "100px" height = "100px" >
< defs >
< circle cx = "50" cy = "50" r = "40"
stroke = "black" />
</ defs >
</ svg >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Document</ title >
</ head >
< style >
svg{
background-color: green;
}
</ style >
< body >
< svg width = "100px" height = "100px" >
< defs >
< circle id = "ele" cx = "50" cy = "50"
r = "40" stroke = "black"
stroke-width = "10" />
</ defs >
< defs >
< circle id = "ele" cx = "50" cy = "50"
r = "40" stroke = "black" />
</ defs >
< use xlink:href = "#ele"
fill = "url('#myGradient')" />
</ svg >
</ body >
</ html >
|
Output:
Last Updated :
07 Aug, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...