SVG Line
Last Updated :
29 Nov, 2023
The SVG Line is used to draw lines in SVG format. Element <line> has other attributes too like a stroke for specifying the color of the stroke and the stroke width for specifying the thickness of the width.
Attributes
- x1: Defines the starting point of the line on the x-axis.
- y1: Defines the starting point of the line on the y-axis.
- x2: Defines the ending point of the line on the x-axis.
- y2: Defines the ending point of the line on the y-axis.
- stroke: Specifies the color of the stroke (outline) of the line.
- stroke-width: Specifies the thickness or width of the line.
Example 1: This example shows an SVG <line> element with a stroke color.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >SVG Lines</ title >
< style >
@import url(
* {
font-family: 'Poppins', sans-serif;
}
.box {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
}
</ style >
</ head >
< body >
< div class = "box" >
< div style="color: green;
font-size: 35px;">
GeeksforGeeks
</ div >
< div style = "font-size: 30px;" >
SVG Lines
</ div >
< svg height = "200" width = "200" >
< line x1 = "15"
y1 = "15"
x2 = "150"
y2 = "150"
stroke = "green" >
</ line >
</ svg >
</ div >
</ body >
</ html >
|
Output:
SVG Lines
Example 2: This example shows an SVG <line> element with stroke color and stroke-width.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >SVG Lines</ title >
< style >
@import url(
* {
font-family: 'Poppins', sans-serif;
}
.box {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
}
</ style >
</ head >
< body >
< div class = "box" >
< div style="color: rgb(25, 124, 25);
font-size: 35px;">
GeeksforGeeks
</ div >
< div style = "font-size: 30px;" >
SVG Lines
</ div >
< svg height = "200" width = "200" >
< line x1 = "150"
y1 = "15"
x2 = "15"
y2 = "160"
stroke = "red"
stroke-width = "3" >
</ line >
</ svg >
</ div >
</ body >
</ html >
|
Output:
SVG Lines
Share your thoughts in the comments
Please Login to comment...