SVG <g> element
The SVG <g> element is a container used to group other SVG elements.
Transformations applied to the <g> element are also performed on its child elements, and its attributes are inherited by its children.
Syntax:
<g attributes="" > <elements> </g>
Attributes:
- core Attributes: These attributes are core attributes like id, etc.
- styling Attributes: These attributes define styling, exp, class, style.
- conditional Attributes: These attributes are condition-based, exp systemLanguage.
- presentation Attributes: Attributes used to give presentation effects, exp color,clip-rule, etc.
Example 1: Making green consecutive circles inheriting attributes from the <g> element.
<!DOCTYPE html> < html > < body > < svg width = "1200" height = "1200" > < g fill = "white" stroke = "green" stroke-width = "10" > < circle cx = "40" cy = "40" r = "25" /> < circle cx = "80" cy = "40" r = "25" /> < circle cx = "120" cy = "40" r = "25" /> < circle cx = "160" cy = "40" r = "25" /> </ g > </ svg > </ body > </ html > |
chevron_right
filter_none
Output:
Example 2: Making rectangles with the same inherited properties.
<!DOCTYPE html> < html > < body > < svg width = "1200" height = "1200" > < defs > < linearGradient id = "gfgStr" > < stop offset = "50%" stop-color = "green" /> < stop offset = "100%" stop-color = "blue" /> </ linearGradient > </ defs > < g fill = "white" stroke = "url(#gfgStr)" stroke-width = "15" > < rect width = "400" height = "200" /> < rect width = "200" height = "200" /> < rect width = "200" height = "100" /> </ g > </ svg > </ body > </ html > |
chevron_right
filter_none
Output:
Browsers Supported: The following browsers are supported by this SVG element:
- Chrome
- Edge
- Firefox
- Safari
- Internet Explorer
- Opera