SVGEllipseElement

Baseline Widely available

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

Die SVGEllipseElement Schnittstelle bietet Zugriff auf die Eigenschaften von <ellipse>-Elementen.

Instanzeigenschaften

Erbt Methoden von der übergeordneten Schnittstelle SVGGeometryElement.

SVGEllipseElement.cx Nur lesbar: Diese Eigenschaft gibt ein SVGAnimatedLength zurück, das das cx-Attribut des angegebenen <ellipse>-Elements widerspiegelt.
SVGEllipseElement.cy Nur lesbar: Diese Eigenschaft gibt ein SVGAnimatedLength zurück, das das cy-Attribut des angegebenen <ellipse>-Elements widerspiegelt.
SVGEllipseElement.rx Nur lesbar: Diese Eigenschaft gibt ein SVGAnimatedLength zurück, das das rx-Attribut des angegebenen <ellipse>-Elements widerspiegelt.
SVGEllipseElement.ry Nur lesbar: Diese Eigenschaft gibt ein SVGAnimatedLength zurück, das das ry-Attribut des angegebenen <ellipse>-Elements widerspiegelt.

Instanzmethoden

Erbt Methoden von der übergeordneten Schnittstelle SVGGeometryElement.

Beispiel

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

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}`,
  );
}

Ergebnis

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # InterfaceSVGEllipseElement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

<ellipse> SVG-Element