The x attribute defines an x-axis coordinate in the user coordinate system.
Syntax:
x = "x-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 x attribute for setting x coordinate for the elements.
Example 1: Rectangle element with the different x-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 2: Rectangle element with the same x-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 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:
