The marker-start attribute draws a polymarker or arrowhead at the start vertex of the given shaped markable element. Except 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 are not “none”, then both markers will be rendered on the last vertex. The marker-start property is rendered only on the start vertex of the path data. The marker-mid property has its effect only on the following seven elements: path, polyline, polygon, line, circle, ellipse, and rect.
Syntax:
marker-start = "marker-reference | none"
Property values: This attribute accepts two values as mentioned above and described below.
- marker-reference: It draws a marker at the start vertex of elements.
- none: It does not add any marker at the start vertex of element.
Example 1: Below is the code which illustrates the use of marker-start property with the value “none.“
<!DOCTYPE html> <html>
<head>
<style>
.geeks {
stroke-width: 15;
stroke: green;
fill: none;
marker-start: 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="M 0 0 L 10 5 L 0 10 z">
</path>
</marker>
<g class="geeks">
<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-start property with the value of marker-reference.
<!DOCTYPE html> <html>
<head>
<style>
.geeks {
stroke-width: 10;
stroke: green;
fill: 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="M 0 0 L 10 5 L 0 10 z">
</path>
</marker>
<g class="geeks" style=
"marker-start: url(#Triangle);">
<path d="M 100, 75 C
125, 50 150, 50 175, 75">
</path>
</g>
</svg>
</div>
</body>
</html>
|
Output:
Supported Browsers:
- Chrome
- Firefox
- Edge
- Opera
- Safari