The marker element for SVG specifies the graphics that are to be used for drawing markers on a shape.
Specifies the height of the SVG viewport into which the marker is to be fitted according to the viewBox and preserveAspectRatio attributes.
<length-percentage> | <number> strokeWidth | userSpaceOnUse Specifies the width of the SVG viewport into which the marker is to be fitted according to the viewBox and preserveAspectRatio attributes.
<length-percentage> | <number> Specifies how the marker is rotated when it is placed at its position on the shape.
auto | auto-start-reverse | <angle> | <number> Specifies whether or not to force uniform scaling.
Specifies the x-coordinate of the reference point.
<length-percentage> | <number> | left | center | right Specifies the y-coordinate of the reference point.
<length-percentage> | <number> | top | center | bottom 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.
[ <min-x>,? <min-y>,? <width>,? <height> ]
<svg 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>
<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<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 viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<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 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>
<svg 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>
<svg 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>
<svg 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>
<svg 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>
<svg 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>
<svg 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/Happy.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>
<svg 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/Happy.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>
<svg 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>
<svg 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>
<svg 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>
<svg 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>
<svg 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>
<svg 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>
<svg 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>
<svg 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>
<svg 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>
<svg 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>
<svg 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>
<svg 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>
<svg 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>
<svg 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>