SVG CircleElement.cx Property
Last Updated :
30 Mar, 2022
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 >
|
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 >
|
Output:
Share your thoughts in the comments
Please Login to comment...