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.
Needs Examples: This section should include examples.
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.
If an SVG document is likely to be referenced as a component of another document, you might want to include a viewBox attribute on the outermost svg element of the referenced document. This attribute provides a convenient way to design SVG documents to scale-to-fit into an arbitrary viewport.
svg elements can appear in the middle of SVG content. You can use these elements to embed SVG document fragments within other SVG document fragments. You can also use svg elements within the middle of SVG content to establish a new viewport.
In all cases, you must declare an SVG namespace so that all SVG elements are identified as belonging to the SVG namespace. Typically, you can declare an SVG namespace as follows:
<svg xmlns="http://www.w3.org/2000/svg" ... >
- Scalable Vector Graphics: Document Structure, Section 5.11.2
The SVGSVGElement object has these events:
- onabort: Occurs when page loading is stopped before an element is loaded completely.
- onclick: Fires when the user clicks the left mouse button on the object.
- ondblclick: Fires when the user double-clicks the object.
- onerror: Occurs when an element does not load properly or a script runs incorrectly.
- onfocusin: Fires for an element just prior to setting focus on that element.
- onfocusout: Fires for the current element with focus immediately after moving focus to another element.
- onload: Fires immediately after the client loads the object.
- onload: Occurs when the browser has fully parsed the element and all of its descendants.
- onmousedown: Fires when the user clicks the object with either mouse button.
- onmousemove: Fires when the user moves the mouse over the object.
- onmouseout: Fires when the user moves the mouse pointer outside the boundaries of the object.
- onmouseover: Fires when the user moves the mouse pointer into the object.
- onmouseup: Fires when the user releases a mouse button while the mouse is over the object.
- onresize: Occurs when the document view is being resized.
- onscroll: Occurs when a document view is being moved along the x-axis, y-axis, or both axes.
- onunload: Occurs when a document is removed from a window or frame.
- onzoom: Occurs when the document zoom level or currentScale property changes.
The SVGSVGElement object has these methods:
- animationsPaused: Gets a value that indicates whether this SVG document fragment is in a paused state.
- checkEnclosure: Determines if the rendered content of the specified element is entirely contained within the specified rectangle.
- checkIntersection: Determines if the rendered content of the specified element intersects the specified rectangle.
- createEvent: Creates an event object to be used in conjunction with the dispatchEvent method.
- createSVGAngle: Creates a new SVGAngle object that does not have units, that is set to 0 degrees, and that is not attached to any document.
- createSVGLength: Creates a new SVGLength object that has a length of 0 user units.
- createSVGMatrix: Creates a new SVGMatrix object that is set to the identity matrix and that is not attached to any document.
- createSVGNumber: Creates a new SVGNumber object that has a value of zero and that is not attached to any document.
- createSVGPoint: Creates a new SVGPoint object that is initialized to the point (0,0) in the user coordinate system and that is not attached to any document.
- createSVGRect: Creates a new SVGRect object that has all values set to 0 user units and that is not attached to any document.
- createSVGTransform: Creates a new SVGTransform object that is set to the identity matrix and that is not attached to any document.
- createSVGTransformFromMatrix: Creates a matrix transform object whose values are given by the specified matrix.
- deselectAll: Cancels the selection of any selected objects, including any selections of text strings and text boxes.
- forceRedraw: Redraws all regions of the viewport that require updating.
- getBBox: Gets the bounding box, in current user space, of the geometry of all contained graphics elements.
- getComputedStyle: Returns the current computed value of the combined CSS properties for an element.
- getCTM: Gets the transformation matrix that transforms from the current user units to the viewport coordinate system for the nearestViewportElement object.
- getCurrentTime: Gets the current time, in seconds, relative to the start time for the current SVG document fragment.
- getElementById: Gets the element that matches the specified ID from the SVG document or document fragment.
- getEnclosureList: Gets the list of graphics elements whose rendered content is entirely contained within the specified rectangle.
- getIntersectionList: Gets the list of graphics elements whose rendered content intersects the specified rectangle.
- 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.
- pauseAnimations: Pauses all currently running animations that are defined within the SVG document fragment that corresponds to this svg element.
- setCurrentTime: Sets the new current time for this SVG document fragment.
- suspendRedraw: Suspends redrawing a device for a specified duration.
- unpauseAnimations: Resumes currently running animations that are defined within the SVG document fragment.
- unsuspendRedraw: Cancels the specified suspension of redrawing operations.
- unsuspendRedrawAll: Cancels all currently active suspensions of redrawing operations.
The SVGSVGElement 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.
- contentScriptType: Gets the default scripting language of the current document fragment.
- contentStyleType: Note:
contentStyleType may be altered or unavailable in subsequent versions of the operating system or product.
Gets the default style sheet language of the current document.
- currentScale: Gets or sets the current scale factor, relative to the initial view (when this property is called from an outermost svg element.
- currentTranslate: Gets or sets the current translation factor, relative to the initial view (when this property is called from an outermost svg element).
|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]