SVG marker element

Last Updated : 18 Aug, 2020

The <marker> element in SVG is used to define the graphics that is mostly used for the dawing 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:

My Personal Notes

Related Articles