实例属性
此接口还继承了其父接口 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" />
</svg>
JavaScript
js
const circle = document.getElementById("circle");
function clickCircle() {
// 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);
}
circle.addEventListener("click", clickCircle);
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGCircleElement |
浏览器兼容性
加载中…
另见
<circle>SVG 元素