mozilla
Your Search Results

    cx

    « SVG Attribute reference home

    For the <circle> and the <ellipse> element, this attribute define the x-axis coordinate of the center of the element. If the attribute is not specified, the effect is as if a value of "0" were specified.

    For the <radialgradient> element, this attribute define the x-axis coordinate of the largest (i.e., outermost) circle for the radial gradient. The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle. If the attribute is not specified, the effect is as if a value of 50% were specified.

    Usage context

    Categories None
    Value <coordinate>
    Animatable Yes
    Normative document SVG 1.1 (2nd Edition): The circle element
    SVG 1.1 (2nd Edition): The ellipse element
    SVG 1.1 (2nd Edition): The radialGradient element

    <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 width="120" height="220"  
         viewPort="0 0 120 120" version="1.1" 
         xmlns="http://www.w3.org/2000/svg">
    
        <style type="text/css" >
          
          <![CDATA[
           circle.circleClass {
           stroke: #006600;
           fill:   #cc0000;
        }
    
          ]]>
        </style>
         <circle  class="circleClass"   cx="40" cy="50" r="26"/>
    </svg>
    

    Elements

    The following elements can use the cx attribute

    Document Tags and Contributors

    Contributors to this page: teoli, rshetty, Jeremie
    Last updated by: Jeremie,