SVGRect: x property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Please take two minutes to fill out our short survey.
The x property describes the horizontal coordinate of the position of the element.
Usage context
| Name | x |
|---|---|
| Value | <length> | <percentage> |
| Initial | 0 |
| Applies to |
<mask>, 'svg', 'rect', 'image', 'foreignObject'
|
| Inherited | no |
| Percentages | refer to the size of the current viewport (see Units) |
| Media | visual |
| Computed value | absolute length or percentage |
| Animatable | yes |
Simple usage
A <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for X coordinates, the y-axis for Y coordinates). Its syntax is the same as that for <length>.
html
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="0" width="40" height="40" fill="blue"></rect>
</svg>
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
<rect x="40" y="0" width="40" height="40" fill="green"></rect>
</svg>
Specifications
No specification found
No specification data found for api.SVGRect.x.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.