The <marker> element in SVG is used to define the graphics that is mostly used for the drawing purpose. It may be used in graphs, charts for making arrowheads and polymarkers on a given path.
Syntax:
<marker></marker refX="" viewbox="" refY="" markerWidth="" markerHeight="" orient="">
Property Values: This element contains the following properties:
- refX: It gives the reference for the x-coordinate of the marker.
- refY: It gives the reference for the y-coordinate of the marker.
- viewbox: Viewbox gives details about the bound of the SVG viewport for the current SVG.
- orient: It defines the orientation of the marker.
- markerWidth: This attribute defines the width of the marker viewport.
- markerHeight: This attribute defines the height of the marker viewport.
Below given are a few examples of the function given above.
Example1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
path1tent="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
svg{
width: 200px;
height: 200px;
color: black;
background-color: green;
}
</style>
<body>
<svg>
<defs>
<marker id="arrow"
refX="5"
refY="5"
markerWidth="10"
markerHeight="16"
orient="auto-start-reverse">
<path d="M 0 0 L 8 5 L 0 11 z" />
</marker>
<marker id="dot"
refX="5"
refY="5"
markerWidth="15"
markerHeight="15">
<rect width="5"
height="5"
x="2"
y="4"
fill="white" />
</marker>
</defs>
<polyline points="30, 10 30, 120 150, 120"
fill="none"
stroke="black"
marker-start="url(#arrow)"
marker-end="url(#arrow)" />
<polyline points="30, 120 80, 40 152, 80"
fill="none"
stroke="red"
marker-start="url(#dot)"
marker-mid="url(#dot)"
marker-end="url(#dot)" />
</svg>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
path1tent="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
svg{
width: 200px;
height: 200px;
color: black;
background-color: green;
}
</style>
<body>
<svg>
<defs>
<marker id="arrow"
refX="5"
refY="5"
markerWidth="10"
markerHeight="16"
orient="auto-start-reverse">
<path d="M 0 0 L 8 5 L 0 11 z" />
</marker>
<marker id="dot"
refX="5"
refY="5"
markerWidth="15"
markerHeight="15">
<rect width="5"
height="5"
x="2"
y="4"
fill="white" />
</marker>
</defs>
<polyline points="30, 10 30, 150 150, 150"
fill="blue"
stroke="black"
marker-start="url(#arrow)"
marker-end="url(#arrow)" />
<polyline points="40, 120 80, 80 100, 90 120, 120 120, 40 150, 20"
fill="none"
stroke="red"
marker-start="url(#dot)"
marker-mid="url(#dot)"
marker-end="url(#dot)" />
</svg>
</body>
</html>
Output:
