y

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

Note: The y property only applies to , , , and elements nested in an . It has no effect on outermost elements and does not apply to other SVG elements nor to HTML elements or pseudo-elements.

Syntax

css

/* length and percentage values */
y: 10px;
y: 10%;

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

Values

The and values denote the y-axis coordinate position of the top left corner of the SVG element.

: As an absolute or relative length, it can be expressed in any unit allowed by the CSS data type.
: Percentages refer to the height of the SVG viewBox, if declared, otherwise, the percentage refers to the height of the current SVG viewport.

Formal definition

Initial value	`0`
Applies to	, , , and elements in
Inherited	no
Percentages	refer to the height of the current SVG viewport
Computed value	the percentage as specified or the absolute length
Animation type	by computed value type

Formal syntax

Examples

Defining the y-axis coordinates of SVG shapes

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

HTML

We include four identical SVG 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

CSS

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

css

svg {
  border: 1px solid;
}

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

rect:nth-of-type(2) {
  y: -20px;
  fill: red;
}

rect:nth-of-type(3) {
  y: 4em;
  fill: yellow;
}

rect:nth-of-type(4) {
  y: 60%;
  fill: orange;
}

Results

The top edges of the rectangles are at 10 (from the attribute), -20px, 4em, and 60%, respectively. The rectangle is 40px tall, so the -20px places half the red rectangle outside the viewport. The SVG is 150px tall, so the orange rectangle's top side is 90px from the top of the SVG viewport.

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # Y

y