SVG: Markers

The <marker> element defines a graphic used for drawing arrowheads or polymarkers on a given <path>, <line>, <polyline> or <polygon> element.

Markers can be attached to shapes using the marker-start, marker-mid, and marker-end properties.

Attributes

markerHeight

Defines the height of the marker viewport. Value type: <length> ; Default value: 3.

markerUnits

This attribute defines the coordinate system for the attributes markerWidth, markerHeight and the contents of the <marker>. Value type: userSpaceOnUse | strokeWidth; Default value: strokeWidth

markerWidth

Defines the width of the marker viewport. Value type: <length> ; Default value: 3

orient

Defines the orientation of the marker relative to the shape it is attached to. Value type: auto|auto-start-reverse|angle ; Default value: 0

preserveAspectRatio

Defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)?; Default value: xMidYMid meet

refX

Defines the x coordinate for the reference point of the marker. Value type: left|center|right|<coordinate>; Default value: 0

refY

Defines the y coordinate for the reference point of the marker. Value type: top|center|bottom|<coordinate>; Default value: 0

viewBox

This attribute defines the bound of the SVG viewport for the current SVG fragment. Value type: <list-of-numbers>; Default value: none

paint-order

Specifies the order that the fill, stroke, and markers of a given shape or text element are painted.

Value: normal | [ fill || stroke || markers ]. Default value: normal

If normal, the fill will be painted first, then the stroke, and finally the markers. Otherwise, the order of any of fill, stroke, markers indicates the order in which the painting happens, from left to right. If any of the three painting components is omitted, they will be painted in their default order after the specified components. For example, specifying stroke is equivalent to stroke fill markers.

shape-rendering

The shape-rendering attribute provides hints to the renderer about what tradeoffs to make when rendering shapes like paths, circles, or rectangles.

You can use this attribute with the following SVG elements: <circle<, <ellipse<, <line<, <path<, <polygon<, <polyline<, and <rect<

It takes on values: auto | optimizeSpeed | crispEdges | geometricPrecision. The value crispEdges prompts that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels.

style

The style attribute allows to style an element using CSS declarations. It functions identically to the style attribute in HTML.

systemLanguage

This attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.

tabindex

This attribute allows you to control whether an element is focusable and to define the relative order of the element for the purposes of sequential focus navigation. Its value is an integer.

transform

The transform attribute defines a list of transform definitions that are applied to an element and the element's children.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
      id="arrow"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="6"
      markerHeight="6"
      orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>

    <marker
      id="dataArrow"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="6"
      markerHeight="6"
      orient="-65deg">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
    </marker>
  </defs>

  <polyline
    points="10,10 10,90 90,90"
    fill="none"
    stroke="black"
    marker-start="url(#arrow)"
    marker-end="url(#arrow)" />

  <polyline
    points="15,80 29,50 43,60 57,30 71,40 85,15"
    fill="none"
    stroke="grey"
    marker-start="url(#dataArrow)"
    marker-mid="url(#dataArrow)"
    marker-end="url(#dataArrow)" />
</svg>