x

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 CSS property defines the x-axis coordinate of the top left corner of the SVG <rect> shape, <image> image, <foreignObject> viewport or nested <svg> viewport relative to the nearest <svg> ancestor's user coordinate system. If present, it overrides the element's x attribute.

Note: The x property only applies to <rect>, <image>, <foreignObject>, and <svg> elements nested in an <svg>. It has no effect on the outermost <svg> elements itself, and does not apply to other SVG elements nor to HTML elements or pseudo-elements.

Syntax

css
/* length and percentage values */
x: 40px;
x: 40%;

/* Global values */
x: inherit;
x: initial;
x: revert;
x: revert-layer;
x: unset;

Values

The <length> and <percentage> values denote the x-axis coordinate position of the top left corner of the SVG element container.

<length>

As an absolute or relative length, it can be expressed in any unit allowed by the CSS <length> data type.

<percentage>

Percentages refer to the width of the SVG viewBox, if declared, otherwise, the percentage refers to the width of the current SVG viewport.

Formal definition

Initial value0
Applies to<svg>, <rect>, <image>, and <foreignObject> elements in <svg>
Inheritedno
Percentagesrefer to the width of the current SVG viewport
Computed valuethe percentage as specified or the absolute length
Animation typeby computed value type

Formal syntax

x = 
<length-percentage>

<length-percentage> =
<length> |
<percentage>

Examples

Defining the x-axis coordinates of SVG shapes

This example demonstrates the basic use case of x, and how the CSS x property takes precedence over the x attribute.

HTML

We include four identical SVG <rect> elements; their x and y attributes values are all 10, meaning the four rectangles are all in the same location, 10px from the top and left corner of the SVG viewport.

html
<svg xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" x="10" y="10" />
  <rect width="100" height="100" x="10" y="10" />
  <rect width="100" height="100" x="10" y="10" />
  <rect width="100" height="100" x="10" y="10" />
</svg>

CSS

We style all the rectangles to have a black border and be slightly transparent, so overlapping rectangles are visible. We provide each rectangle with different fill and x values.

css
svg {
  border: 1px solid;
  width: 300px;
}

rect {
  fill: none;
  stroke: black;
  opacity: 0.8;
}

rect:nth-of-type(2) {
  x: 3em;
  fill: red;
}

rect:nth-of-type(3) {
  x: 180px;
  fill: yellow;
}

rect:nth-of-type(4) {
  x: 50%;
  fill: orange;
}

Results

The left edges of the rectangles are at 10 (from the attribute), 3em, 180px, and 50%, respectively. The SVG is 300px wide, so the last rectangle's left side is at the 150px mark.

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# X

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
x

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also