Tutorial by Examples

This is an example of an end marker specified with a minimal number of parameters. Note that the stroke color of the original element is not inherited by the marker. <svg width="800px" height="600px"> <defs> <marker id="examplemarker" vi...

The axis offsets for drawing the marker that are specified by refX and refY are applied before the rotation specified by the orient parameter. Below you can see the effects of various combinations of orient and refX, refY to illustrate this. <svg width="800px" height="600px"&...

The default for drawing markers is to use the stroke width of the calling element, but you can explicitly specify that markers be drawn using the unit system for the element the marker is being applied to by specifying markerUnits="userSpaceOnUse". Markers are drawn into a 3x3 markerUnits ...

Elements can specify start, mid and end markers separately. Below are examples of start, mid and end markers for all elements that can be marked. Please note that Chrome does not currently (July 2016) calculate auto orientation correctly for start and end markers for polygons (bug# 633012), and also...