SVGEllipseElement

Instanz-Eigenschaften

Erbt Methoden von seinem Eltern-Interface, SVGGeometryElement.

SVGEllipseElement.cx Schreibgeschützt

Diese Eigenschaft gibt ein SVGAnimatedLength zurück, das das cx-Attribut des gegebenen <ellipse>-Elements widerspiegelt.

SVGEllipseElement.cy Schreibgeschützt

Diese Eigenschaft gibt ein SVGAnimatedLength zurück, das das cy-Attribut des gegebenen <ellipse>-Elements widerspiegelt.

SVGEllipseElement.rx Schreibgeschützt

Diese Eigenschaft gibt ein SVGAnimatedLength zurück, das das rx-Attribut des gegebenen <ellipse>-Elements widerspiegelt.

SVGEllipseElement.ry Schreibgeschützt

Diese Eigenschaft gibt ein SVGAnimatedLength zurück, das das ry-Attribut des gegebenen <ellipse>-Elements widerspiegelt.

Instanz-Methoden

Erbt Methoden von seinem Eltern-Interface, SVGGeometryElement.

Beispiel

SVG

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

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <ellipse> SVG-Element