« SVG Attribute reference home 

For the <circle> and the <ellipse> elements, this attribute defines the x-coordinate of the center of the element. If unspecified, the effect is as if the value is set to "0".

For the <radialGradient> element, this attribute defines the x-coordinate of the largest (i.e., outermost) circle for the radial gradient. The gradient will be drawn such that 100% gradient stop is mapped to the perimeter of the largest (i.e. outermost) circle. If the attribute is not specified, the effect is as if a value of 50% were set.

Usage context

Categories None
Value <coordinate>
Animatable Yes
Normative document SVG 1.1 (2nd Edition): The SVGCircleElement
SVG 1.1 (2nd Edition): The SVGEllipseElement
SVG 1.1 (2nd Edition): The SVGRadialGradientElement


A <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for X coordinates, the y-axis for Y coordinates). Its syntax is the same as that for <length>.

Within the SVG DOM, a <coordinate> is represented as an SVGLength or an SVGAnimatedLength.


SVG 'cx' attribute example

HTML Content

<svg viewBox="0 0 500 100">
  <circle cy="50" r="25"/> <!-- This circle will appear cut off (cx=0) -->
  <circle cx="150" cy="50" r="25"/>
  <circle cx="350" cy="50" r="25"/>



The following elements can use the cx attribute

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?


Compatibility unknown  
Compatibility unknown

Document Tags and Contributors

Contributors to this page: fscholz, jakubfiala, mehulsr, Sheppy
Last updated by: fscholz,