SVG CircleElement.cx Property
The SVG CircleElement.cx property returns an SVGAnimatedLength object corresponding to the attribute of the given line element.
Syntax:
CircleElement.cx
Return value: This property returns the SVGAnimatedLength object that can be used get the cx of the circle element.
Example 1:
<!DOCTYPE html> <html> <body> viewBox="0 0 250 250" width="250" height="250"> <circle cx="100" cy="100" r="50" fill="green" id="gfg" onclick="clickCircle();" /> <script> var g = document.getElementById("gfg"); console.log(g.cx) </script> </svg> </body> </html> |
chevron_right
filter_none
Output:
Example 2:
HTML
<!DOCTYPE html> <html> <body> viewBox="0 0 250 250" width="250" height="250"> <circle cx="100" cy="100" r="50" fill="green" class="gfg" onclick="clickCircle();" /> <script> function clickCircle() { var g = document.querySelector(".gfg"); document.write("cx value of the circle is : ", g.cx.animVal.value); } </script> </svg> </body> </html> |
chevron_right
filter_none
Output:
