HTML marker-mid Attribute
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
<!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
filter_none
Output:
Example 2: Below is the code which illustrates the use of marker-mid attribute with value marker-reference.
HTML
<!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
filter_none
Output:
Supported Browsers:
- Chrome
- Firefox
- Opera
- Safari
- Edge
- Internet Explorer
