Related Articles

Related Articles

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:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :