x
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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
/* 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 value | 0 |
|---|---|
| Applies to | <svg>, <rect>, <image>, and <foreignObject> elements in <svg> |
| Inherited | no |
| Percentages | refer to the width of the current SVG viewport |
| Computed value | the percentage as specified or the absolute length |
| Animation type | by 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.
<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.
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 |