SVG markerHeight Attribute

Last Updated : 31 Mar, 2022

The markerHeight attribute indicates the height of the viewport into which the <marker> is to be fitted when it is displayed according to the preserveAspectRatio and viewBox attributes. Only <marker> element is using this attribute.

Syntax:

markerrHeight = "length-percentage" | "number"

Attribute values: The markerHeight attribute accepts values mentioned above and described below.

length-percentage: It indicates either a relative or an absolute height of the marker.
number: It indicates the height of the marker in the units defined by the markerUnits attribute.

Note: The default value of markerHeight attribute is 3.

Example 1: Below are the examples that illustrates the use of markerHeight attribute.

HTML

<!DOCTYPE html> 
<html> 
  
    <body> 
        <h1 style="color: green;  
            margin-left: 10px;"> 
            GeeksforGeeks 
        </h1> 
  
        <svg viewBox="0 15 1220 520" 
             xmlns="http://www.w3.org/2000/svg"> 
            <defs> 
                <marker id="geek"
                    viewBox="0 0 10 10"
                    refX="1" refY="5"
                    markerUnits="strokeWidth"
                    markerWidth="8"
                    markerHeight="8"
                    orient="auto"> 
                   <path d="M 0 0 L 10 5 L 0 10 z" 
                    fill="#008000"/> 
                </marker> 
            </defs> 
  
            <polyline points="20, 20 40, 25 60, 
                    40 80, 120 120, 140 200, 180" 
                    style="fill:none;stroke:green; 
                    stroke-width:5"  
                    marker-end="url(#geek)"/> 
          </svg> 
    </body> 
     
</html>

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
    <body> 
        <h1 style="color: green;  
            margin-left: 10px;"> 
            GeeksforGeeks 
        </h1> 
  
        <svg viewBox="0 15 1220 520" 
             xmlns="http://www.w3.org/2000/svg"> 
            <defs> 
                <marker id="geek"
                    viewBox="0 0 10 10"
                    refX="1" refY="5"
                    markerUnits="strokeWidth"
                    markerWidth="8"
                    markerHeight="8"
                    orient="auto"> 
                   <path d="M 0 0 L 10 5 L 0 10 z" 
                    fill="#008000"/> 
                </marker> 
            </defs> 
  
            <polyline points="100, 105 180, 
                    20 100, 17 50, 100" 
                    stroke="green" 
                    stroke-width="5" 
                    fill ="none"
                    marker-end="url(#geek)"/> 
          </svg> 
    </body> 
     
</html>