SVGCircleElement
SVGCircleElement
接口是 <circle>
元素的接口。
实例属性
此接口还继承了其父接口 SVGGeometryElement
的属性。
SVGCircleElement.cx
只读SVGCircleElement.cy
只读-
此属性定义了
<circle>
元素中心的 y 坐标。它由元素的cy
属性表示。 SVGCircleElement.r
只读-
此属性定义了
<circle>
元素的半径。它由元素的r
表示。
实例方法
继承其父接口 SVGGeometryElement
的方法。
示例
调整圆形大小
在此示例中,我们绘制了一个圆形,并在您单击它时随机增加或减少其半径。
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);
}
规范
规范 |
---|
可缩放矢量图形 (SVG) 2 # InterfaceSVGCircleElement |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。
另请参阅
<circle>
SVG 元素