SVG x Attribute
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: