marker

The marker element defines the graphic that is to be used for drawing arrowheads or polymarkers on a given path, line, polyline or polygon element.

Markers are attached to shapes using the marker-start, marker-mid, and marker-end properties.

Usually, this element is created with:

const marker = parentElement.add('marker')

It's possible to create it as a disconnected element with gSVG('marker') and attach it to the SVG document with .attachTo().

More info: mdn | w3c

.markerHeight()

marker.markerHeight( height )

Set this attribute defines the height of the marker viewport.

• argument: {number|string} height The height value (length or percentage)

• returns: {gSVGObject} The original object

const markerHeight = element.markerHeight();

Get the markerHeight current value.

• returns: {number|string}

.markerUnits()

marker.markerUnits( unit )

Set this attribute defines the coordinate system for the attributes markerWidth, markerHeight and the contents of the marker.

• argument: {string} unit Must be userSpaceOnUse | strokeWidth

• returns: {gSVGObject} The original object

const markerUnits = element.markerUnits();

Get the markerUnits current value.

• returns: {string}

.markerWidth()

marker.markerWidth( width )

Set this attribute defines the width of the marker viewport.

• argument: {number|string} width The width value (length or percentage)

• returns: {gSVGObject} The original object

const markerWidth = element.markerWidth();

Get the markerWidth current value.

• returns: {number|string}

.orient()

marker.orient( orientation )

Set this attribute defines the orientation of the marker relative to the shape it is attached to.

• argument: {string|number} orientation Must be auto | auto-start-reverse | an angle | a number

• returns: {gSVGObject} The original object

const orient = element.orient();

Get the orient current value.

• returns: {string|number}

.preserveAspectRatio()

element.preserveAspectRatio( align )

Set the preserveAspectRatio attribute. It indicates how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio.

• argument: {string} align Must be 'none' | 'xMinYMin' | 'xMidYMin' | 'xMaxYMin' | 'xMinYMid' | 'xMidYMid' (the default) | 'xMaxYMid' | 'xMinYMax' | 'xMidYMax' | 'xMaxYMax' and can be complemented with 'meet' (the default) | 'slice'

• returns: {gSVGObject} The original object

const align = element.preserveAspectRatio();

Get the preserveAspectRatio current value.

• returns: {string} Current align configuration

.refX()

marker.refX( x )

Set this attribute defines the x coordinate for the reference point of the marker.

• argument: {number} x The x value

• returns: {gSVGObject} The original object

const refX = element.refX();

Get the refX current value.

• returns: {number}

.refY()

marker.refY( y )

Set this attribute defines the y coordinate for the reference point of the marker.

• argument: {number} y - The y value

• returns: {gSVGObject} The original object

const refY = element.refY();

Get the refY current value.

• returns: {number}

.viewBox()

element.viewBox( minX, minY, width, height )

Set the viewBox attribute. It defines the position and dimension, in user space, of an SVG viewport. With four values specify a rectangle in user space which is mapped to the bounds of the viewport established for the SVG element.

• argument: {number} minX x-axis min value

• argument: {number} minY y-axis min value

• argument: {number} width width value

• argument: {number} height height value

• returns: {gSVGObject} The original object

element.viewBox( viewBoxArray )

Set the viewBox attribute with an array with four values.

• argument: {Array} viewBoxArray Array with four numeric values

• returns: {gSVGObject} The original object

element.viewBox( viewBoxString )

Set the viewBox attribute with a string.

• argument: {string} viewBoxString Four numeric values separated by coma or space

• returns: {gSVGObject} The original object

const viewBox = element.viewBox();

Get the viewBox current value.

• returns: {string} four values separate by coma

• Parent elements: a | defs | g | marker | mask | pattern | svg | symbol.

• Child elements: a | animate | animateMotion | animateTransform | circle | clipPath | defs | desc | ellipse | filter | foreignObject | g | image | line | linearGradient | marker | mask | metadata | mpath | path | pattern | polygon | polyline | radialGradient | rect | set | stop | style | svg | switch | symbol | text | title | use | view.