The marker-end attribute draws a polymarker or arrowhead at the last vertex of a given shaped markable element. Except for polyline and path, the first vertex is the same as the last vertex for all the markable elements. In this case, if the value of both marker-start and marker-end is not “none”, then both the markers will be rendered on the last vertex. The marker-end property is only rendered on the last vertex of the path data. The marker-mid property has its effect only on the following seven elements which are path, polyline, polygon, line, circle, ellipse, and rect.
Syntax:
marker-end = "marker-reference | none"
Attribute values: This attribute accepts two values as mentioned above and described below.
- marker-reference: It draws a marker at the last vertex of elements.
- none: It does not add any marker at the last vertex of the element.
Example 1: Below is the code which illustrates the use of marker-end property with the value of marker-reference.
<!DOCTYPE html> <html>
<body>
<div class="Container" style="
color: green; text-align: center;">
<h1>GeeksforGeeks</h1>
<svg width="600px" height="100px">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto"
markerUnits="strokeWidth">
<path d="M0, 0 L0, 6 L9, 3 z" fill="#006400" />
</marker>
</defs>
<line x1="150" y1="50" x2="450" y2="50" stroke="#000" stroke-width="5" marker-end="url(#arrow)" />
</svg>
</div>
</body>
</html>
|
Output:
Example 2: Below is the code which illustrates the use of marker-end property with value “none”.
<!DOCTYPE html> <html>
<body>
<div class="Container" style="
color: green; text-align:center;">
<h1>GeeksforGeeks</h1>
<svg width="600px" height="100px">
<defs>
<marker id="arrow" markerWidth="10"
markerHeight="10" refX="0" refY="3" orient="auto"
markerUnits="strokeWidth">
<path d="M0, 0 L0, 6 L9, 3 z" fill="#006400" />
</marker>
</defs>
<line x1="150" y1="50" x2="450" y2="50" stroke="#000" stroke-width="5" marker-end="none" />
</svg>
</div>
</body>
</html>
|
Output:
Supported Browsers:
- Firefox
- Chrome
- Safari
- Edge
- Opera