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.

EventTarget Node Element SVGElement SVGGraphicsElement SVGGeometryElement SVGEllipseElement

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

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

Ergebnis

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# InterfaceSVGEllipseElement

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
SVGEllipseElement
cx
cy
rx
ry

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch