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>