SVG Line
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( 'https://fonts.googleapis.com/css2?family=Poppins&display=swap'); * { 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;"> w3wiki </ 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:
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( 'https://fonts.googleapis.com/css2?family=Poppins&display=swap'); * { 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;"> w3wiki </ 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:
Contact Us