SVG.Marker = SVG.invent({ // Initialize node create: 'marker', // Inherit from inherit: SVG.Container, // Add class methods extend: { // Set width of element width: function (width) { return this.attr('markerWidth', width) }, // Set height of element height: function (height) { return this.attr('markerHeight', height) }, // Set marker refX and refY ref: function (x, y) { return this.attr('refX', x).attr('refY', y) }, // Update marker update: function (block) { // remove all content this.clear() // invoke passed block if (typeof block === 'function') { block.call(this, this) } return this }, // Return the fill id toString: function () { return 'url(#' + this.id() + ')' } }, // Add parent method construct: { marker: function (width, height, block) { // Create marker element in defs return this.defs().marker(width, height, block) } } }) SVG.extend(SVG.Defs, { // Create marker marker: function (width, height, block) { // Set default viewbox to match the width and height, set ref to cx and cy and set orient to auto return this.put(new SVG.Marker()) .size(width, height) .ref(width / 2, height / 2) .viewbox(0, 0, width, height) .attr('orient', 'auto') .update(block) } }) SVG.extend([SVG.Line, SVG.Polyline, SVG.Polygon, SVG.Path], { // Create and attach markers marker: function (marker, width, height, block) { var attr = ['marker'] // Build attribute name if (marker !== 'all') attr.push(marker) attr = attr.join('-') // Set marker attribute marker = arguments[1] instanceof SVG.Marker ? arguments[1] : this.doc().marker(width, height, block) return this.attr(attr, marker) } })