SVGEllipseElement

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"
    onclick="outputSize();" />
</svg>

JavaScript

js

function outputSize() {
  const ellipse = document.getElementById("ellipse");

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

结果

规范

规范
可缩放矢量图形 (SVG) 2 # InterfaceSVGEllipseElement

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

<ellipse> SVG 元素