SVG <marker> Element (original) (raw)

Last Updated : 31 Mar, 2022

The 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 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 `

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

`

Output:

Example 2:

HTML `

      <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)"  />
  

`

Output: