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 上檢視此頁面 • 報告此內容的問題