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) 2The 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.
Update compatibility data on GitHub
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
See also
cx by Mozilla Contributors is licensed under CC-BY-SA 2.5.