symbol element | SVGSymbolElement object

Defines graphical template objects that a use element can instantiate.

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

DOM Information

Inheritance Hierarchy

 Node
  Element
   SVGElement
     SVGSymbolElement

Members

The SVGSymbolElement object has these types of members:

Events

The SVGSymbolElement object has these events.

EventDescription
onload

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

 

Properties

The SVGSymbolElement 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.

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.

ownerSVGElement

Gets the nearest ancestor svg element.

preserveAspectRatio

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

style

Gets a style object.

viewBox

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

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.

 

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.

Use symbol elements for graphics that are used multiple times in the same document to add structure and semantics. Documents that are rich in structure can be rendered graphically, as speech or braille, and promote accessibility.

Compared to a g element, the symbol element itself is not rendered. Only instances of a symbol element (that is, a reference to a symbol by a use element) are rendered.

The symbol element has viewBox and preserveAspectRatio attributes that enable a symbol to scale-to-fit within a rectangular viewport that the referencing use element defines.

The display property does not apply to the symbol element. Thus, symbol elements are not directly rendered even if you set the display property to a value other than none. symbol elements are available for referencing even when you set the display property on the symbol element or any of its ancestors to none.

Examples

In the following code example, a symbol is created and displayed in two different sizes. Copy this sample to a text file and save it with the .html file extension. Run it in Internet Explorer 9 to see the symbols.

The symbols will look like this:

symbol element example


<!DOCTYPE HTML>
<html>
	
  <head>
  </head>
	
  <body>
    <!-- Create SVG container. -->
    <svg width="400" height="400">
      <!-- Definitions -->
      <defs>
        <!-- Define symbol for fill. -->
        <symbol id="mySymbol" viewBox="0 0 50 50"
						x="0" y="0" width="10" height="10" >
          <!-- Create path for individual symbol. -->
          <path d="M 0 10 L 25 30 L 50 30 Z" stroke="darkorchid" 
						stroke-width="3" fill="cornflowerblue" />
        </symbol>			
      </defs>
			
      <!-- Insert symbol twice. -->
      <use x="50" y="50" width="50" height="50" 
				xlink:href="#mySymbol" />
				
      <use x="50" y="100" width="100" height="100" 
				xlink:href="#mySymbol" />
      </svg>
  </body>
</html>
	

See also

Reference
SVGMarkerElement
SVGPatternElement

 

 

Show:
© 2014 Microsoft