# 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 gySVG('marker')
and attach it to the SVG document with .attachTo()
.
More info: mdn (opens new window) | w3c (opens new window)
# .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:
{gySVGObject}
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 beuserSpaceOnUse
|strokeWidth
returns:
{gySVGObject}
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:
{gySVGObject}
The original object
const markerWidth = element.markerWidth();
Get the markerWidth
current value.
- returns:
{number|string}
# .orient()
marker.orient( orientation )
Set this attribute defines the orient
ation of the marker relative to the shape it is attached to.
argument:
{string|number} orientation
Must beauto
|auto-start-reverse
| an angle | a numberreturns:
{gySVGObject}
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:
{gySVGObject}
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 valuereturns:
{gySVGObject}
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 valuereturns:
{gySVGObject}
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 valueargument:
{number} minY
y-axis min valueargument:
{number} width
width valueargument:
{number} height
height valuereturns:
{gySVGObject}
The original object
element.viewBox( viewBoxArray )
Set the viewBox
attribute with an array with four values.
argument:
{Array} viewBoxArray
Array with four numeric valuesreturns:
{gySVGObject}
The original object
element.viewBox( viewBoxString )
Set the viewBox
attribute with a string.
argument:
{string} viewBoxString
Four numeric values separated by coma or spacereturns:
{gySVGObject}
The original object
const viewBox = element.viewBox();
Get the viewBox
current value.
returns:
{string}
four values separate by comaParent elements: a | defs | g | marker | mask | pattern | svg | symbol.
Child elements: a | animate | animateMotion | animateTransform | circle | clipPath | defs | desc | discard | 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.
← linearGradient mask →