SVG <marker> Element

31 Mar, 2022
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:
HTML
<!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:
HTML
<!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:
kk9826225
HTML-SVG
SVG-Element
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.