The markerHeight attribute indicates the height of the viewport into which the <marker> is to be fitted when it is displayed according to the preserveAspectRatio and viewBox attributes. Only <marker> element is using this attribute.
Syntax:
markerrHeight = "length-percentage" | "number"
Attribute values: The markerHeight attribute accepts values mentioned above and described below.
- length-percentage: It indicates either a relative or an absolute height of the marker.
- number: It indicates the height of the marker in the units defined by the markerUnits attribute.
Note: The default value of markerHeight attribute is 3.
Example 1: Below are the examples that illustrates the use of markerHeight attribute.
HTML
<!DOCTYPE html> <html>
<body>
<h1 style="color: green;
margin-left: 10px;">
GeeksforGeeks
</h1>
<svg viewBox="0 15 1220 520" <defs>
<marker id="geek"
viewBox="0 0 10 10"
refX="1" refY="5"
markerUnits="strokeWidth"
markerWidth="8"
markerHeight="8"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#008000"/>
</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-end="url(#geek)"/>
</svg>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html> <html>
<body>
<h1 style="color: green;
margin-left: 10px;">
GeeksforGeeks
</h1>
<svg viewBox="0 15 1220 520" <defs>
<marker id="geek"
viewBox="0 0 10 10"
refX="1" refY="5"
markerUnits="strokeWidth"
markerWidth="8"
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-end="url(#geek)"/>
</svg>
</body>
</html>
|
Output: