SVG markerHeight Attribute
Last Updated :
31 Mar, 2022
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:
Share your thoughts in the comments
Please Login to comment...