cx attribute | cx property

Gets or sets the x-coordinate of the center of a circle or an ellipse.

Scalable Vector Graphics (SVG) 1.1, Appendix MInternet Explorer 9

 

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

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.

Rendering of Code Example

See also

SVGCircleElement
SVGEllipseElement

 

 

Show: