SVG defs Element
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" > <!--this defs code will not be executed as it is not called--> < 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 > <!-- this defs code will not be executed as it is not called using use --> < defs > < circle id = "ele" cx = "50" cy = "50" r = "40" stroke = "black" /> </ defs > < use xlink:href = "#ele" fill = "url('#myGradient')" /> </ svg > </ body > </ html > |
Output:
Please Login to comment...