The <marker> element in SVG is used to define the graphics that is mostly used for the drawing purpose. It may be used in graphs, charts for making arrowheads and polymarkers on a given path.
Syntax:
<marker></marker refX="" viewbox="" refY="" markerWidth="" markerHeight="" orient="">
Property Values: This element contains the following properties:
- refX: It gives the reference for the x-coordinate of the marker.
- refY: It gives the reference for the y-coordinate of the marker.
- viewbox: Viewbox gives details about the bound of the SVG viewport for the current SVG.
- orient: It defines the orientation of the marker.
- markerWidth: This attribute defines the width of the marker viewport.
- markerHeight: This attribute defines the height of the marker viewport.
Below given are a few examples of the function given above.
Example1:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
path1tent=" width = device -width,
initial-scale = 1 .0">
< title >Document</ title >
</ head >
< style >
svg{
width: 200px;
height: 200px;
color: black;
background-color: green;
}
</ style >
< body >
< svg >
< defs >
< marker id = "arrow"
refX = "5"
refY = "5"
markerWidth = "10"
markerHeight = "16"
orient = "auto-start-reverse" >
< path d = "M 0 0 L 8 5 L 0 11 z" />
</ marker >
< marker id = "dot"
refX = "5"
refY = "5"
markerWidth = "15"
markerHeight = "15" >
< rect width = "5"
height = "5"
x = "2"
y = "4"
fill = "white" />
</ marker >
</ defs >
< polyline points = "30, 10 30, 120 150, 120"
fill = "none"
stroke = "black"
marker-start = "url(#arrow)"
marker-end = "url(#arrow)" />
< polyline points = "30, 120 80, 40 152, 80"
fill = "none"
stroke = "red"
marker-start = "url(#dot)"
marker-mid = "url(#dot)"
marker-end = "url(#dot)" />
</ svg >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
path1tent=" width = device -width,
initial-scale = 1 .0">
< title >Document</ title >
</ head >
< style >
svg{
width: 200px;
height: 200px;
color: black;
background-color: green;
}
</ style >
< body >
< svg >
< defs >
< marker id = "arrow"
refX = "5"
refY = "5"
markerWidth = "10"
markerHeight = "16"
orient = "auto-start-reverse" >
< path d = "M 0 0 L 8 5 L 0 11 z" />
</ marker >
< marker id = "dot"
refX = "5"
refY = "5"
markerWidth = "15"
markerHeight = "15" >
< rect width = "5"
height = "5"
x = "2"
y = "4"
fill = "white" />
</ marker >
</ defs >
< polyline points = "30, 10 30, 150 150, 150"
fill = "blue"
stroke = "black"
marker-start = "url(#arrow)"
marker-end = "url(#arrow)" />
< polyline points = "40, 120 80, 80 100, 90 120, 120 120, 40 150, 20"
fill = "none"
stroke = "red"
marker-start = "url(#dot)"
marker-mid = "url(#dot)"
marker-end = "url(#dot)" />
</ svg >
</ body >
</ html >
|
Output:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...