This article is In Progress.
Needs Summary: This article does not have a summary. Summaries give a brief overview of the topic and are automatically included on some listing pages that link to this article.
Here, the use element is used to create three instances of a rectangle defined in a defs tag.
<!DOCTYPE html> <html> <head></head> <body> <svg> <defs> <rect id="myRect" width="50" height="50" /> </defs> <use x="50" y="50" fill="red" xlink:href="#myRect" /> <use x="75" y="75" fill="green" xlink:href="#myRect" /> <use x="100" y="100" fill="blue" xlink:href="#myRect" /> </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.
For more information, see the SVG specification.
- Scalable Vector Graphics: Document Structure, Section 5.11.8
The SVGUseElement object has these events:
- onload: Occurs when the browser has fully parsed the element and all of its descendants.
The SVGUseElement 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 SVGUseElement object has these properties:
- animatedInstanceRoot: Gets the animated root of the instance tree of a use element.
- 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).
- height: Gets or sets the height of an element.
- href: Gets an xlink:href attribute of an element.
- instanceRoot: Gets the root of the instance tree of a use element.
- 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.
- pointerEvents: Sets or retrieves a value that specifies under what circumstances a given graphics element can be the target element for a pointer event in SVG.
- 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.
- width: Defines the width of an element.
- x: Gets or sets the x-coordinate value.
- 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.
- y: Gets or sets the y-coordinate value.
This article contains content originally from external sources.
Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]