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: