cx

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.

cx = 
  <length-percentage>  

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

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.

<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.

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.

This example demonstrates using percentage values for cx.

HTML

We use the same markup as the previous example.

<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>.

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.

• SVG cx attribute
• Geometry properties: cx, cy, r, rx, ry, x, y, width, height
• fill
• stroke
• paint-order
• border-radius shorthand property
• radial-gradient
• <basic-shape> data type