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>