The markerWidth attribute indicates the width of the viewport within which the <marker> is to be adjusted when it is displayed according to the preserveAspectRatio and viewBox attributes. Only <marker> element is using this attribute.
Syntax:
markerWidth = "length-percentage" | "number"
Attribute values: The markerWidth attribute accepts values mentioned above and described below.
- length-percentage: It indicates either an relative or an absolute width of the marker.
- number: It indicates the width of the marker in the units defined by the markerUnits attribute.
Note: The default value of markerWidth attribute is 3.
Example 1: Below are the examples that illustrates the use of markerWidth attribute.
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;
margin-left: 10px;">
GeeksforGeeks
</h1>
<svg viewBox="-20 -5 1220 520"
xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="geek"
markerWidth="2.5"
markerHeight="2.5"
refX="1.5"
refY="1.5">
<circle cx="6" cy="6" r="10"
stroke="none" fill="yellow"/>
</marker>
</defs>
<polyline points="20, 20 40, 25 60,
40 80, 120 120, 140 200, 180"
style="fill:none;stroke:green;
stroke-width:5"
marker-mid="url(#geek)"/>
</svg>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;
margin-left: 10px;
font-size: 25px;">
GeeksforGeeks
</h1>
<svg viewBox="0 15 1220 520"
xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="geek"
viewBox="0 0 10 10"
refX="5" refY="5"
markerUnits="strokeWidth"
markerWidth="10"
markerHeight="8"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z"
fill="#008000"/>
</marker>
</defs>
<polyline points="100, 105 180,
20 100, 17 50, 100"
stroke="green"
stroke-width="5"
fill ="none"
marker-start="url(#geek)"/>
</svg>
</body>
</html>
Output:
