cy

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 cy CSS property defines the y-axis center point of an SVG <circle> or <ellipse> elements. If present, it overrides the element's cy attribute.

Note: While the SVG <radialGradient> element supports the cy attribute, the cy property only applies to <circle> and <ellipse> elements nested in an <svg>. This attribute does not apply to <radialGradient> or other SVG elements nor to HTML elements or pseudo-elements.

Syntax

css

/* length and percentage values */
cy: 3px;
cy: 20%;

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

Values

The <length> and <percentage> values denote the vertical center of the circle or ellipse.

<length>: As an absolute or relative length, it can be expressed in any unit allowed by the CSS <length> data type. Negative values are invalid.
<percentage>: Percentages refer to the height of the current SVG viewport.

Formal definition

Initial value	`0`
Applies to	`<ellipse>` and `<circle>` elements in `<svg>`
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

cy = 
  <length-percentage>  

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

Examples

Defining the y-axis coordinate of a circle and ellipse

In this example, we have two identical <circle> and two identical <ellipse> elements in an SVG; their cy attribute values ar 50 and 150, respectively.

html

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="30" />
  <circle cx="50" cy="50" r="30" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
</svg>

With CSS, we style only the first circle and first ellipse, allowing their twin shapes to use default styles (with (fill defaulting to black). We use the cy property to override the value of the SVG cy attribute and also give it a fill and stroke to differentiate the first shapes in each pair from their twin. The browser renders SVG images as 300px wide and 150px tall by default.

css

svg {
  border: 1px solid;
}

circle:first-of-type {
  cy: 30px;
  fill: lightgreen;
  stroke: black;
}
ellipse:first-of-type {
  cy: 100px;
  fill: pink;
  stroke: black;
}

The styled circle's center is 30px from the top edge of the SVG viewport and the styled ellipse is 100px from that edge, as defined in the CSS cy property values. The unstyled shapes centers are both 50px from the top edge of the SVG viewport, as defined in their SVG cy attribute values.

y-axis coordinates as percentage values

In this example, we use the same markup as the previous example. The only difference is the CSS cy property value; in this case, we use percentage values of 30% and 50%.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="30" />
  <circle cx="50" cy="50" r="30" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
</svg>

css

svg {
  border: 1px solid;
}

circle:first-of-type {
  cy: 30%;
  fill: lightgreen;
  stroke: black;
}
ellipse:first-of-type {
  cy: 50%;
  fill: pink;
  stroke: black;
}

In this case, the y-axis coordinates of the center of the circle and ellipse are 30% and 50% of the height of the current SVG viewport, respectively. As the image's height defaulted to 150px, meaning the cy value is the equivalent of 45px and 120px.

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # CY

Browser compatibility

BCD tables only load in the browser