SVGEllipseElement

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

SVGEllipseElement 接口提供了对 <ellipse> 元素的属性的访问。

实例属性

继承自其父接口 SVGGeometryElement 的方法。

SVGEllipseElement.cx 只读: 此属性返回一个 SVGAnimatedLength 对象，该对象反映给定 <ellipse> 元素的 cx 属性。
SVGEllipseElement.cy 只读: 此属性返回一个 SVGAnimatedLength 对象，该对象反映给定 <ellipse> 元素的 cy 属性。
SVGEllipseElement.rx 只读: 此属性返回一个 SVGAnimatedLength 对象，该对象反映给定 <ellipse> 元素的 rx 属性。
SVGEllipseElement.ry 只读: 此属性返回一个 SVGAnimatedLength 对象，该对象反映给定 <ellipse> 元素的 ry 属性。

实例方法

继承自其父接口 SVGGeometryElement 的方法。

示例

SVG

html

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="100" rx="100" ry="60" id="ellipse" />
</svg>

JavaScript

const ellipse = document.getElementById("ellipse");

function outputSize() {
  // Outputs "horizontal radius: 100 vertical radius: 60"
  console.log(
    `horizontal radius: ${ellipse.rx.baseVal.valueAsString}`,
    `vertical radius: ${ellipse.ry.baseVal.valueAsString}`,
  );
}

ellipse.addEventListener("click", outputSize);

结果

规范

规范
Scalable Vector Graphics (SVG) 2 # 接口 SVGEllipseElement

浏览器兼容性

另见

<ellipse> SVG 元素

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年6月19日，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题