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 seiner Elternschnittstelle, SVGGeometryElement.

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

Instanzmethoden

Erbt Methoden von seiner Elternschnittstelle, 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