Skip to content
Related Articles

Related Articles

SVG <marker> Element

View Discussion
Improve Article
Save Article
  • Last Updated : 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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!