Pergola markers

Marker definitions are functions – properties of the pergola.marker object. The function creates and appends the marker to the defs if it does not exist. It returns the URL string.

You assign the call directly to "marker-start", "marker-mid" and "marker-end" properties, or to a variale if the marker is to be reused.

View as standalone SVG

The blue line with the red dots example:

var marker = pergola.marker.dotRed();

$C({
  element : "path",
  d : "M100,200h100l50,50h50",
  fill : "none",
  stroke : "blue",
  "stroke-width" : 2,
  "marker-start" : marker,
  "marker-mid" : marker,
  "marker-end" : marker,
  appendTo : pergola.user
});

A marker definition from the library:

intersect : function() {
  var id = "intersect";

  if (!document.getElementById(id)) {
    $C({
      element : "marker",
      id : id,
      viewBox : "0 0 12 12",
      refX : 6,
      refY : 6,
      markerUnits : "userSpaceOnUse",
      markerWidth : 12,
      markerHeight : 12,
      appendTo : pergola.defs
    })
    .appendChild(
      $C({
        element : "path",
        d : "M12,0L0,12 M0,0L12,12",
        fill : "none",
        stroke : "brown",
        "stroke-width" : .25
      })
    );
  }

  return "url(#" + id + ")";
}

Markers