paper.defineMarker(markerDefinition)
Define an SVG marker for later reuse within the paper. The method returns the marker id and the markerDefinition
is an object with type
property and any other visual attributes. The valid values for type
are 'path'
, 'circle'
, 'ellipse'
, 'rect'
, 'polyline'
and 'polygon'
.
var markerId = paper.defineMarker({
type: 'path', // SVG Path
fill: '#666',
stroke: '#333',
// The coordinate system for defining the path data
// ------------------------------------------------
// 0,0: marker-start, marker-end or marker-mid
// n,0: n > 0 in path direction
// n < 0 opposite path direction
// 0,m: m > 0 left to the path direction
// m < 0 right to the path direction
d: 'M 10 -10 0 0 10 10 z'
});
// Draw an arrow at the start and the end of a path
svgPath.setAttribute('marker-start', 'url(#' + markerId + ')');
svgPath.setAttribute('marker-end', 'url(#' + markerId + ')');