cx

« 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

<coordinate>

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.

Example

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"/>
</svg>

Result

Elements

The following elements can use the cx attribute

Browser compatibility

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

Legend

Compatibility unknown  
Compatibility unknown

Document Tags and Contributors

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