The marker SVG element specifies the graphics that are to be used for drawing markers on a shape.
Attributes
markerHeight
Specifies the height of the SVG viewport into which the marker is to be fitted according to the viewBox and preserveAspectRatio attributes.
Value
<length-percentage> | <number>
Default
markerUnits
Value
strokeWidth | userSpaceOnUse
Default
markerWidth
Specifies the width of the SVG viewport into which the marker is to be fitted according to the viewBox and preserveAspectRatio attributes.
Value
<length-percentage> | <number>
Default
orient
Specifies how the marker is rotated when it is placed at its position on the shape.
Value
auto | auto-start-reverse | <angle> | <number>
Default
preserveAspectRatio
Specifies whether or not to force uniform scaling.
Value
Default
refX
Specifies the x-coordinate of the reference point.
Value
<length-percentage> | <number> | left | center | right
Default
refY
Specifies the y-coordinate of the reference point.
Value
<length-percentage> | <number> | top | center | bottom
Default
viewBox
Specifies a rectangle in user space.
A list of four numbers: min-x , min-y , width , and height that should be mapped to the bounds of the SVG viewport established by the given element, taking into account the preserveAspectRatio attribute. The presence of the viewBox attribute results in a transformation being applied to the viewport coordinate system.
Value
[ <min-x>,? <min-y>,? <width>,? <height> ]
Default
markerHeight
<length-percentage>
<number>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="1e1" markerWidth="20" viewBox="-10 -10 20 20">
<polygon fill="red" points="-10,-10 10,0 -10,10"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
markerUnits
strokeWidth
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 1000 1000">
<defs>
<marker id="myid" markerHeight="20" markerUnits="strokeWidth" markerWidth="20" viewBox="-10 -10 20 20">
<polygon points="-10,-10 10,0 -10,10"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black" vector-effect="non-scaling-stroke"/>
</svg>
</svg>
userSpaceOnUse
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 1000 1000">
<defs>
<marker id="myid" markerHeight="20" markerUnits="userSpaceOnUse" markerWidth="20" viewBox="-10 -10 20 20">
<polygon points="-10,-10 10,0 -10,10"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black" vector-effect="non-scaling-stroke"/>
</svg>
</svg>
markerWidth
<length-percentage>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid1" markerHeight="20" markerWidth="10" viewBox="-10 -10 20 20">
<polygon fill="red" points="-10,-10 10,0 -10,10"/>
</marker>
<marker id="myid2" markerHeight="20" markerWidth="10%" viewBox="-10 -10 20 20">
<polygon fill="blue" points="-10,-10 10,0 -10,10"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid1)" marker-mid="url(#myid2)" marker-start="url(#myid1)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
<number>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="20" markerWidth="1e1" viewBox="-10 -10 20 20">
<polygon fill="red" points="-10,-10 10,0 -10,10"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
orient
<angle>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="20" markerWidth="20" orient="45deg" viewBox="-10 -10 20 20">
<polygon points="-10,-10 10,0 -10,10"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,200 400,200 500,100" stroke="black"/>
</svg>
auto
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="20" markerWidth="20" orient="auto" viewBox="-10 -10 20 20">
<polygon points="-10,-10 10,0 -10,10"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,200 400,200 500,100" stroke="black"/>
</svg>
auto-start-reverse
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="20" markerWidth="20" orient="auto-start-reverse" viewBox="-10 -10 20 20">
<polygon points="-10,-10 10,0 -10,10"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,200 400,200 500,100" stroke="black"/>
</svg>
<number>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="20" markerWidth="20" orient="45" viewBox="-10 -10 20 20">
<polygon points="-10,-10 10,0 -10,10"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,200 400,200 500,100" stroke="black"/>
</svg>
preserveAspectRatio
<align>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="100" markerWidth="50" preserveAspectRatio="xMinYMin" viewBox="0 0 100 100">
<polygon points="0,0 100,0 0,100"/>
<image href="/assets/png/HappyFace.png"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
<meetOrSlice>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="100" markerWidth="50" preserveAspectRatio="xMidYMid slice" viewBox="0 0 100 100">
<polygon points="0,0 100,0 0,100"/>
<image href="/assets/png/HappyFace.png"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
refX
center
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="20" markerWidth="20" refX="center" viewBox="0 0 20 20">
<polygon fill="red" points="0,0 20,10 0,20"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
left
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="20" markerWidth="20" refX="left" viewBox="0 0 20 20">
<polygon fill="red" points="0,0 20,10 0,20"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
<length-percentage>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid1" markerHeight="20" markerWidth="20" refX="20" viewBox="0 0 20 20">
<polygon fill="red" points="0,0 20,10 0,20"/>
</marker>
<marker id="myid2" markerHeight="20" markerWidth="20" refX="20%" viewBox="0 0 20 20">
<polygon fill="blue" points="0,0 20,10 0,20"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid1)" marker-mid="url(#myid2)" marker-start="url(#myid1)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
<number>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="20" markerWidth="20" refX="2e1" viewBox="0 0 20 20">
<polygon fill="red" points="0,0 20,10 0,20"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
right
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="20" markerWidth="20" refX="right" viewBox="0 0 20 20">
<polygon fill="red" points="0,0 20,10 0,20"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
refY
bottom
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="20" markerWidth="20" refY="bottom" viewBox="0 0 20 20">
<polygon fill="red" points="0,0 20,10 0,20"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
center
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="20" markerWidth="20" refY="center" viewBox="0 0 20 20">
<polygon fill="red" points="0,0 20,10 0,20"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
<length-percentage>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid1" markerHeight="20" markerWidth="20" refY="20" viewBox="0 0 20 20">
<polygon fill="red" points="0,0 20,10 0,20"/>
</marker>
<marker id="myid2" markerHeight="20" markerWidth="20" refY="20%" viewBox="0 0 20 20">
<polygon fill="blue" points="0,0 20,10 0,20"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid1)" marker-mid="url(#myid2)" marker-start="url(#myid1)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
<number>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="20" markerWidth="20" refY="2e1" viewBox="0 0 20 20">
<polygon fill="red" points="0,0 20,10 0,20"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
top
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="20" markerWidth="20" refY="top" viewBox="0 0 20 20">
<polygon fill="red" points="0,0 20,10 0,20"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
viewBox
<height>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="10" markerWidth="20" viewBox="-10 -10 20 10">
<polygon fill="red" points="0,0 -10,0 0,-10"/>
<polygon fill="green" points="0,0 -10,0 0,10"/>
<polygon fill="blue" points="0,0 10,0 0,-10"/>
<polygon fill="yellow" points="0,0 10,0 0,10"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
<min-x>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="20" markerWidth="10" viewBox="0 -10 10 20">
<polygon fill="red" points="0,0 -10,0 0,-10"/>
<polygon fill="green" points="0,0 -10,0 0,10"/>
<polygon fill="blue" points="0,0 10,0 0,-10"/>
<polygon fill="yellow" points="0,0 10,0 0,10"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
<min-y>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="10" markerWidth="20" viewBox="-10 0 20 10">
<polygon fill="red" points="0,0 -10,0 0,-10"/>
<polygon fill="green" points="0,0 -10,0 0,10"/>
<polygon fill="blue" points="0,0 10,0 0,-10"/>
<polygon fill="yellow" points="0,0 10,0 0,10"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>
<width>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="myid" markerHeight="20" markerWidth="10" viewBox="-10 -10 10 20">
<polygon fill="red" points="0,0 -10,0 0,-10"/>
<polygon fill="green" points="0,0 -10,0 0,10"/>
<polygon fill="blue" points="0,0 10,0 0,-10"/>
<polygon fill="yellow" points="0,0 10,0 0,10"/>
</marker>
</defs>
<polyline fill="none" marker-end="url(#myid)" marker-mid="url(#myid)" marker-start="url(#myid)" points="100,100 200,200 300,100 400,200 500,100" stroke="black"/>
</svg>