The y attribute defines the y-axis coordinate in the user coordinate system.
Syntax:
y = "y-coordinate"
Attribute Values:
- length: length at which we want to set the x-axis.
- percentage: percentage at which we want to set the x-axis.
We will use the y attribute for setting the y coordinate for the elements.
Example 1: Group of rectangle elements with different y-axis.
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "200"
viewBox = "0 0 300 300" >
< rect x = "20" y = "20" width = "60"
height = "60" fill = "green" />
< rect x = "20" y = "120" width = "60"
height = "60" fill = "green" />
< rect x = "20" y = "120" width = "60"
height = "60" fill = "green" />
</ svg >
</ body >
</ html >
|
Output:
Example 2: A group of rectangle elements with the same y-axis.
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "200"
viewBox = "0 0 300 300" >
< rect x = "20" y = "20" width = "60"
height = "60" fill = "green" />
< rect x = "120" y = "20" width = "60"
height = "60" fill = "green" />
< rect x = "220" y = "20" width = "60"
height = "60" fill = "green" />
</ svg >
</ body >
</ html >
|
Output:
Example 3: Use percentage value.
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "200"
viewBox = "0 0 300 300" >
< rect x = "30%" y = "30%" width = "60"
height = "60" fill = "green" />
</ svg >
</ body >
</ html >
|
Output:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...