SVGRect: x property
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>