SVGEllipseElement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Giao diện SVGEllipseElement cung cấp quyền truy cập vào các thuộc tính của phần tử <ellipse>.

EventTarget Node Element SVGElement SVGGraphicsElement SVGGeometryElement SVGEllipseElement

Thuộc tính phiên bản

Kế thừa phương thức từ giao diện cha, SVGGeometryElement.

SVGEllipseElement.cx Read only

Thuộc tính này trả về một SVGAnimatedLength phản ánh thuộc tính cx của phần tử <ellipse> đã cho.

SVGEllipseElement.cy Read only

Thuộc tính này trả về một SVGAnimatedLength phản ánh thuộc tính cy của phần tử <ellipse> đã cho.

SVGEllipseElement.rx Read only

Thuộc tính này trả về một SVGAnimatedLength phản ánh thuộc tính rx của phần tử <ellipse> đã cho.

SVGEllipseElement.ry Read only

Thuộc tính này trả về một SVGAnimatedLength phản ánh thuộc tính ry của phần tử <ellipse> đã cho.

Phương thức phiên bản

Kế thừa phương thức từ giao diện cha, SVGGeometryElement.

Ví dụ

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

js
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);

Kết quả

Thông số kỹ thuật

Specification
Scalable Vector Graphics (SVG) 2
# InterfaceSVGEllipseElement

Tương thích trình duyệt

Xem thêm