This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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

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:

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