svg.marker.js

Deprecated as markers are now native in svg.js

A plugin for svg.js adding marker functionality.

Svg.marker.js is licensed under the terms of the MIT License.

Usage

Include this plugin after including the svg.js libarary in your html document.

Creating a marker

Two parameters are required to create a marker: width and height.

var marker = draw.defs().marker(20, 10);

// Add that which will be used be rendered
marker.path('M0,0L20,5L0,10z').attr({
  fill: '#999',
  'stroke-width': 0
});


// ... then later
draw.polyline([[0, 3], [5, 16]]).attr('marker-end', marker);

Alternatively, you can give your marker an id, and set it as it would be traditionally:

marker.attr('id', 'triangle');

draw.polyline('0,3 5,16').attr('marker-end', 'url(#triangle)');

You'll probably want to add some of the following attributes ( if not all )

• markerWidth default: 3
• markerHeight default: 3
• orient default: 'auto' (this is the only one that is set by the plugin)
• refX default: 0
• refY default: 0

For more information on each of these attributes (and markers in general) see http://www.w3.org/TR/SVG/painting.html#MarkerElement