SVGCircleElement - 对应 <Circle> 元素

SVGCircleElement 接口对应 <Circle> 元素。

属性

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

SVGCircleElement.cx 只读

该属性定义了 <Circle> 元素的中心的 x 坐标。它由元素的 cx 属性表示。

SVGCircleElement.cy 只读

该属性定义了 <circle> 元素中心的 y 坐标。它由元素的 Cy 属性表示。

SVGCircleElement.r 只读

该属性定义了 <circle> 元素的半径。它由元素的 r 表示。

方法

此接口没有方法，但继承了其父接口 SVGGeometryElement 的方法。

实例

调整圆的大小

在本例中，我们绘制了一个圆，并在您单击它时随机增大或减小其半径。

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();"></circle>
</svg>

JavaScript

function clickCircle() {
  const circle = document.getElementById("circle");
  // 随机确定圆半径是增大还是减小
  const change = Math.random() > 0.5 ? 10 : -10;
  // 将圆半径限制为最小为 10，最大为 250，这样它就不会消失或变得比视口大
  const newValue = Math.min(Math.max(circle.r.baseVal.value + change, 10), 250);
  circle.setAttribute("r", newValue);
}

规范

规范
Scalable Vector Graphics (SVG) 1.1 (Second Edition) # InterfaceSVGCircleElement

桌面浏览器兼容性

暂无兼容数据

相关链接