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.
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.
Browser compatibility
BCD tables only load in the browser