Skip to content
Related Articles

Related Articles

HTML marker-mid Attribute
  • Last Updated : 14 Sep, 2020

The marker-mid attribute draws a polymarker or arrowhead at all the vertices (first and last vertices are excluded) of the given shaped markable element. The marker-mid property has its effect only on the following seven elements that are path, polyline, polygon, line, circle, ellipse, and rect.

Syntax:

marker-mid = "marker-reference | none"

Property values: This attribute accepts two values as mentioned above and described below.

  • marker-reference: This parameter draws a marker at markable elements vertices other than the first and last vertices.
  • none: It does not add any marker at the vertices.

Example 1: Below is the code which illustrates the use of marker-mid attribute with value none.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        #Arrow {
            stroke-width: 20;
            stroke: green;
            fill: none;
            marker-mid: none;
        }
    </style>
</head>
  
<body>
    <div class="Container" style=" 
         color: green; text-align: center;">
        <h1>GeeksforGeeks</h1>
        <svg>
            <marker id="Triangle" viewBox="0 0 10 10" 
                refX="0" refY="5" orient="auto">
                <path d="L 0 0 L 10 5 L 0 10 z">
                </path>
            </marker>
  
            <g id="Arrow">
                <path d="M 100, 75 C 125, 
                    50 150, 50 175, 75">
                </path>
            </g>
        </svg>
    </div>
</body>
  
</html>

chevron_right


Output:



Example 2: Below is the code which illustrates the use of marker-mid attribute with value marker-reference.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        #Arrow {
            stroke-width: 20;
            stroke: rgb(30, 236, 30);
            fill: none;
            marker-mid: url("#Triangle");
        }
    </style>
</head>
  
<body>
  
    <div class="Container" style=" 
        color: green; text-align: center;">
        <h1>GeeksforGeeks</h1>
        <svg>
            <marker id="Triangle" viewBox="0 0 10 10"
                refX="0" refY="5" orient="auto">
                <path d="M 0 0 L 10 5 L 0 10 z"></path>
            </marker>
            <g id="Arrow">
                <path d="M 100, 75 C 125, 
                    50 150, 50 175, 75">
                </path>
            </g>
        </svg>
    </div>
</body>
  
</html>

chevron_right


Output:

Supported Browsers:

  • Chrome
  • Firefox
  • Opera
  • Safari
  • Edge
  • Internet Explorer

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :