For the <circle>
and the <ellipse>
element, this attribute defines 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 defines 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.
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 |
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
.
<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>
The following elements can use the cx
attribute
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/cx