Marker

marker()

Markers can be added to every individual point of a line, polyline, polygon and path. There are three types of markers: start, mid and end. Where start represents the first point, end the last and mid every point in between.

var path = draw.path('M 100 200 C 200 100 300  0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100z')

path.fill('none').stroke({ width: 1 })

path.marker('start', 10, 10, function(add) {
  add.circle(10).fill('#f06')
})
path.marker('mid', 10, 10, function(add) {
  add.rect(10, 10)
})
path.marker('end', 20, 20, function(add) {
  add.circle(6).center(4, 5)
  add.circle(6).center(4, 15)
  add.circle(6).center(16, 10)

  this.fill('#0f6')
})

The marker() method can be used in three ways. Firstly, a marker can be created on any container element (e.g. svg, nested, group, ...). This is useful if you plan to reuse the marker many times, so it will create a marker in the defs but not show it yet:

var marker = draw.marker(10, 10, function(add) {
  add.rect(10, 10)
})

Secondly a marker can be created and applied directly on its target element:

path.marker('start', 10, 10, function(add) {
  add.circle(10).fill('#f06')
})

This will create a marker in the defs and apply it directly. Note that the first argument defines the position of the marker and that there are four arguments as opposed to three with the first example.

Lastly, if a marker is created for reuse on a container element, it can be applied directly to the target element:

path.marker('mid', marker)

Finally, to get a marker instance from the target element reference:

path.reference('marker-end')

height()

returns itself
animate yes

Defines the markerHeight attribute:

marker.height(10)

ref()

returns itself

By default, the refX and refY attributes of a marker are set to respectively half the width nd height values. To define the refX and refY of a marker differently:

marker.ref(2, 7)

size()

returns itself
animate yes

Defines the markerWidth and markerHeight attributes:

marker.size(10, 10)

update()

returns itself

Updating the contents of a marker will clear() the existing content and add the content defined in the block passed as the first argument:

marker.update(function(add) {
  add.circle(10)
})

width()

returns itself
animate yes

Defines the markerWidth attribute:

marker.width(10)
Fork me on GitHub