image element | SVGImageElement object

Provides a way to display a graphics image on the screen.

Scalable Vector Graphics: Document Structure, Section 5.11.11Internet Explorer 9

DOM Information

Inheritance Hierarchy

 Node
  Element
   SVGElement
     SVGImageElement

Members

The SVGImageElement object has these types of members:

Events

The SVGImageElement object has these events.

EventDescription
onload

Occurs when the browser has fully parsed the element and all of its descendants.

 

Methods

The SVGImageElement object has these methods.

MethodDescription
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.

 

Properties

The SVGImageElement object has these properties.

PropertyDescription

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.

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. Starting with IE11, this property also has basic support for HTML elements (see "Remarks" section).

preserveAspectRatio

Gets an XML value that indicates whether to force uniform graphic scaling.

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.

viewBox

Gets a value that indicates how a graphic scales to fit a container element.

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.

 

Standards information

Remarks

Note  In addition to the attributes, properties, events, methods, and styles listed above, SVG elements also inherit core HTML attributes, properties, events, methods, and styles.

Examples

In the following code example, two images are displayed on the screen. They are the same image but the size and position are determined by the attributes of the image element. Copy this sample to a text file and save it with the .html file extension. Run it in Internet Explorer 9 to see the two images on the screen.

The images will look like this:

image element example


<!DOCTYPE HTML>
<html>
	
  <head>
  </head>
	
  <body>
	
    <!-- Create an SVG object. -->
    <svg width="400" height="400">
      <!-- Load an image. -->			
      <image x="50" y="50" width="100" height="100"
				xlink:href="svg.png"/>	
      <image x="150" y="150" width="50" height="50"
				xlink:href="svg.png"/>					
    </svg>
		
  </body>
</html>
	

 

 

Show:
© 2014 Microsoft. All rights reserved.