cx attribute | cx property
Gets or sets the x-coordinate of the center of a circle or an ellipse.
![]() ![]() |
Syntax
| HTML |
|---|
<element cx="p" ... > |
| JavaScript |
|---|
p = object.cx |
Property values
Type: Object
The x-axis coordinate of the center of a circle or an ellipse. If you do not specify this attribute, the effect is the same as if you specify a value of "0".
Standards information
- Scalable Vector Graphics (SVG) 1.1, Appendix M
Remarks
The arc of a circle element and the arc of an ellipse element begin at the 3 o'clock point on the associated radius and progress towards the 9 o'clock point. The starting point and direction of the arc are affected by the user space transform in the same manner as the geometry of the element.
Examples
The following code example demonstrates how the starting point and direction of an arc for an ellipse are affected by a user space transform.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400px" height="300px" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Arc Transform</desc> <!-- Show the outline of the canvas by using a rect element. --> <rect x="1" y="1" width="399" height="299" fill="none" stroke="black" stroke-width="1" /> <defs> <ellipse id="theEllipse" x="0" y="0" rx="50" ry="100" style="fill: blue; stroke: black; stroke-width: 5px;"/> </defs> <use xlink:href="#theEllipse" x="90" y="150"/> <!-- transform="rotate(30, 280, 150)" rotates the ellipse 30 degrees about the point (280, 150) as opposed to the origin of the viewport. --> <use xlink:href="#theEllipse" x="280" y="150" transform="rotate(30, 280, 150)"/> </svg>
In Internet Explorer 9, the preceding code example renders like the following illustration.

See also

