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 dascx
-Attribut des angegebenen<ellipse>
-Elements widerspiegelt. SVGEllipseElement.cy
Nur lesbar-
Diese Eigenschaft gibt ein
SVGAnimatedLength
zurück, das dascy
-Attribut des angegebenen<ellipse>
-Elements widerspiegelt. SVGEllipseElement.rx
Nur lesbar-
Diese Eigenschaft gibt ein
SVGAnimatedLength
zurück, das dasrx
-Attribut des angegebenen<ellipse>
-Elements widerspiegelt. SVGEllipseElement.ry
Nur lesbar-
Diese Eigenschaft gibt ein
SVGAnimatedLength
zurück, das dasry
-Attribut des angegebenen<ellipse>
-Elements widerspiegelt.
Instanzmethoden
Erbt Methoden von der übergeordneten Schnittstelle 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"
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