marker element | SVGMarkerElement object

Defines shapes that can be attached to the middles or ends of line segments in path, line, polyline, and polygon elements.

Scalable Vector Graphics: Painting, Filling, Stroking and Marker Symbols, Section 11.9.2

DOM Information

Inheritance Hierarchy

Node

Element

SVGElement

SVGMarkerElement

Members

The SVGMarkerElement object has these types of members:

Events
Methods
Properties

Events

The SVGMarkerElement object has these events.

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

Methods

The SVGMarkerElement object has these methods.

Method	Description
setOrientToAngle	Sets the value of the orientAngle attribute to the specified angle.
setOrientToAuto	Sets the value of the svgMarkerOrient attribute to `auto`.

Properties

The SVGMarkerElement object has these properties.

Property	Description
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).
markerHeight	Gets the height attribute of the marker element.
markerUnits	Gets or sets the coordinate system for the markerWidth and markerHeight attributes and for the contents of the marker element.
markerWidth	Gets the width attribute of the marker element.
mask	Sets or retrieves a value that indicates a SVG mask.
orientAngle	Gets the angle of orientation of the marker element.
orientType	Gets the orientation type for a marker element.
ownerSVGElement	Gets the nearest ancestor svg element.
preserveAspectRatio	Gets an XML value that indicates whether to force uniform graphic scaling.
refX	Gets the refX attribute on the marker element.
refY	Gets the refY attribute on the marker element.
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

Scalable Vector Graphics: Painting, Filling, Stroking and Marker Symbols, Section 11.9.2

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, square markers are added to each end of a path. Copy this sample to a text file and save it with the .html file extension. Run it in Internet Explorer 9 to see the path with two markers on the screen.

The path with markers will look like this:

JavaScript



<!DOCTYPE HTML>
<html>
	
  <head>
  </head>
	
  <body>
    <!-- Inline SVG -->
    <svg width="400" height="400">
      <!-- Definition of marker -->
      <defs>
        <marker id="knob"
				  viewBox="0 0 10 10" refX="0" refY="5" 
				  markerUnits="strokeWidth"
				  markerWidth="4" markerHeight="3"
				  orient="auto">
				  <path d="M 0 0 L 10 5 L 0 10 z" />
        </marker>
      </defs>
      <!-- Path that will have knobs at both ends -->
      <path d="M 50,100 Q 150,50 250,100" stroke="hotpink" 
				stroke-width="10" fill="white" 
				marker-start="url(#knob)"
				marker-end="url(#knob)" /> 
    </svg>
  </body>
</html>