The g element (<g>) is a container element for grouping together related graphics elements.
The g element (<g>) groups two or more graphics elements or other g elements together to provide document structure. Groups containing the desc and title elements, provide additional semantic information and increase accessibility. When defined inside of a defs element and named using the id attribute, groups can be reused.
View live exampleIn the following code example, the g element is used to group two elements together. They are then rotated together.
<!DOCTYPE HTML> <html> <head></head> <body> <svg width="400" height="400"> <g transform="rotate(30 75 50)"> <rect x="50" y="50" width="50" height="50" fill="firebrick"/> <ellipse cx="100" cy="50" rx="25" ry="50" fill="dodgerblue"/> </g> </svg> </body> </html>
Note: In addition to the attributes, properties, events, methods, and styles listed above, SVG elements also inherent core HTML attributes, properties, events, methods, and styles.
- Scalable Vector Graphics: Document Structure, Section 5.11.3
The SVGGElement object has these events:
- onload: Occurs when the browser has fully parsed the element and all of its descendants.
The SVGGElement object has these methods:
- getBBox: Gets the bounding box, in current user space, of the geometry of all contained graphics elements.
- getCTM: Gets the transformation matrix that transforms from the current user units to the viewport coordinate system for the nearestViewportElement object.
- getScreenCTM: Gets the transformation matrix from the current user units to the screen coordinate system.
- getTransformToElement: Gets the transformation matrix that transforms from the user coordinate system on the current element to the user coordinate system on the specified target element.
- hasExtension: Determines if the specified extension is supported.
The SVGGElement object has these properties:
- className: Gets the names of the classes that are assigned to this object.
- clipPath: Sets or retrieves a reference to the SVG graphical object that will be used as the clipping path.
- externalResourcesRequired: Gets a value that indicates whether referenced resources that are not in the current document are required to correctly render a given element.
- farthestViewportElement: Gets a value that represents the farthest ancestor svg element.
- focusable: Determines if an element can acquire keyboard focus (that is, receive keyboard events) and be a target for field-to-field navigation actions (such as when a user presses the Tab key).
- mask: Sets or retrieves a value that indicates a SVG mask.
- nearestViewportElement: Gets a value that indicates which element established the current viewport.
- ownerSVGElement: Gets the nearest ancestor svg element.
- requiredExtensions: Gets a white space-delimited list of required language extensions.
- requiredFeatures: Gets or sets a white space-delimited list of feature strings.
- style: Gets a style object.
- systemLanguage: Gets or sets a comma-separated list of language names.
- transform: Gets the value of a transform attribute.
- viewportElement: Gets the element that established the current viewport.
- xmlbase: Gets or sets the base attribute on the element.
- xmllang: Gets or sets a value that specifies the language that is used in the contents and attribute values of an element.
- xmlspace: Gets or sets a value that indicates whether white space is preserved in character data.
|Feature||Chrome||Firefox (Gecko)||Internet Explorer||Opera||Safari|
|Feature||Android||BlackBerry||Chrome for mobile||Firefox Mobile (Gecko)||IE Mobile||Opera Mobile||Opera Mini||Safari Mobile|
This article contains content originally from external sources.
Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]