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 >
|
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 >
|
Output:
Supported Browsers:
- Chrome
- Firefox
- Opera
- Safari
- Edge
- Internet Explorer
Last Updated :
14 Sep, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...