SVGCircleElement

实例属性

此接口还继承了其父接口 SVGGeometryElement 的属性。

SVGCircleElement.cx 只读

此属性定义了 <circle> 元素中心的 x 坐标。它由元素的 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 的浏览器中加载。

另请参阅