The cx
read-only property of the SVGCircleElement
interface reflects the cx
attribute of a <circle>
element and by that defines the x-coordinate of the circleʼs center. If unspecified, the effect is as if the value is set to 0
.
Syntax
var xCoordinate = element.cx;
Value
An SVGAnimatedLength
representing the x-coordinate of the circleʼs center.
Example
SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"> <circle cx="50" cy="50" r="50" fill="gold" id="circle"/> </svg>
JavaScript
const circle = document.getElementById('circle'); console.log(circle.cx);
Specifications
Specification | Status | Comment |
Scalable Vector Graphics (SVG) 2 The definition of 'SVGCircleElement.cx' in that specification. |
Candidate Recommendation | No change |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'SVGCircleElement.cx' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
cx | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown