cx

The cx CSS property defines the x-axis center point of an SVG <circle> or <ellipse> element. If present, it overrides the element's cx attribute.

Note: While SVG the cx attribute is relevant to the SVG <radialGradient> element, the cx property only applies to <circle> and <ellipse> elements nested in an <svg>. It doesn't apply to <radialGradient> or other SVG elements nor to HTML elements or pseudo-elements.

Syntax

css

/* length and percentage values */
cx: 20px;
cx: 20%;

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

Values

The <length> and <percentage> values denote the horizontal 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 width of the current SVG viewport.

Formal definition

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

cx = 
  <length-percentage>  

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

Examples

Defining the x-axis coordinate of a circle and ellipse

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

HTML

We include two identical <circle> and two identical <ellipse> elements in an SVG; their cx attribute values are 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>

CSS

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 cx property to override the value of the SVG cx 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 {
  cx: 30px;
  fill: lightgreen;
  stroke: black;
}
ellipse:first-of-type {
  cx: 180px;
  fill: pink;
  stroke: black;
}

Results

The style circle's center is 30px from the left edge of the SVG viewport and the styled ellipse is 180px from that edge, as defined in the CSS cx property values. The unstyled shapes centers are 50px and 150px from the left edge of the SVG viewport, as defined in their SVG cx attribute values.

x-axis coordinates as percentage values

This example demonstrates using percentage values for cx.

HTML

We use the same markup as the previous example.

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>

CSS

We use CSS which is similar to the previous example. The only difference is the CSS cx property value; in this case, we use percentage values of 30% for the <circle> and 80% for the <ellipse>.

css

svg {
  border: 1px solid;
}

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

Results

When using percentage values for cx, the values are relative to the width of the SVG viewport. Here, the x-axis coordinates of the center of the style circle and ellipse are 30% and 80%, respectively, of the width of the current SVG viewport. As the width defaulted to 300px, the cx values are 90px and 240px from the SVG viewport's left edge.

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # CX

Browser compatibility

BCD tables only load in the browser