marker

Overview Table

DOM Interface: SVGElement

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

The path with markers will look like this:



<!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>

Notes

Remarks

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.

Standards information

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

Members

The SVGMarkerElement object has these events:

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

The SVGMarkerElement object has these methods:

setOrientToAngle: Sets the value of the orientAngle attribute to the specified angle.
setOrientToAuto: Sets the value of the svgMarkerOrient attribute to auto.

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

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]