SVGCircleElement
The SVGCircleElement
interface is an interface for the <circle>
element.
Instance properties
This interface also inherits properties from its parent, SVGGeometryElement
.
SVGCircleElement.cx
Read only-
This property defines the x-coordinate of the center of the
<circle>
element. It is denoted by thecx
attribute of the element. SVGCircleElement.cy
Read only-
This property defines the y-coordinate of the center of the
<circle>
element. It is denoted by thecy
attribute of the element. SVGCircleElement.r
Read only-
This property defines the radius of the
<circle>
element. It is denoted by ther
of the element.
Instance methods
Inherits methods from its parent interface, SVGGeometryElement
.
Examples
Resizing a circle
In this example we draw a circle and randomly increase or decrease its radius when you click it.
HTML
html
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 250 250"
width="250"
height="250">
<circle
cx="100"
cy="100"
r="50"
fill="gold"
id="circle"
onclick="clickCircle();" />
</svg>
JavaScript
js
function clickCircle() {
const circle = document.getElementById("circle");
// Randomly determine if the circle radius will increase or decrease
const change = Math.random() > 0.5 ? 10 : -10;
// Clamp the circle radius to a minimum of 10 and a maximum of 250,
// so it won't disappear or get bigger than the viewport
const newValue = Math.min(Math.max(circle.r.baseVal.value + change, 10), 250);
circle.setAttribute("r", newValue);
}
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # InterfaceSVGCircleElement |
Browser compatibility
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
See also
<circle>
SVG element