From 8d07ffa7c814b38a6c0370adc3bc1d2e57d1ae54 Mon Sep 17 00:00:00 2001 From: yashrajbharticybtekk Date: Sat, 21 Dec 2024 02:09:12 +0530 Subject: [PATCH] MDN Feature Pages for SVGEllipseElement --- .../web/api/svgellipseelement/cx/index.md | 52 +++++++++++++++++++ .../web/api/svgellipseelement/cy/index.md | 52 +++++++++++++++++++ .../web/api/svgellipseelement/rx/index.md | 52 +++++++++++++++++++ .../web/api/svgellipseelement/ry/index.md | 52 +++++++++++++++++++ 4 files changed, 208 insertions(+) create mode 100644 files/en-us/web/api/svgellipseelement/cx/index.md create mode 100644 files/en-us/web/api/svgellipseelement/cy/index.md create mode 100644 files/en-us/web/api/svgellipseelement/rx/index.md create mode 100644 files/en-us/web/api/svgellipseelement/ry/index.md diff --git a/files/en-us/web/api/svgellipseelement/cx/index.md b/files/en-us/web/api/svgellipseelement/cx/index.md new file mode 100644 index 000000000000000..20990a68ad1f1f6 --- /dev/null +++ b/files/en-us/web/api/svgellipseelement/cx/index.md @@ -0,0 +1,52 @@ +--- +title: "SVGEllipseElement: cx property" +short-title: cx +slug: Web/API/SVGEllipseElement/cx +page-type: web-api-instance-property +browser-compat: api.SVGEllipseElement.cx +--- + +{{APIRef("SVG")}} + +The **`cx`** read-only property of the {{domxref("SVGEllipseElement")}} interface describes the x-axis coordinate of the center of the ellipse as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("cx")}} attribute on the {{SVGElement("ellipse")}} element. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the x-coordinate of the ellipse's center in the user coordinate system. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + +``` + +We can access the computed values of the `cx` attributes: + +```js +const ellipses = document.querySelectorAll("ellipse"); +const cxPos0 = ellipses[0].cx; +const cxPos1 = ellipses[1].cx; + +console.dir(cxPos0.baseVal.value); // output: 50 +console.dir(cxPos1.baseVal.value); // output: 50 (25% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGEllipseElement.cy")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svgellipseelement/cy/index.md b/files/en-us/web/api/svgellipseelement/cy/index.md new file mode 100644 index 000000000000000..4cbb8feae44829f --- /dev/null +++ b/files/en-us/web/api/svgellipseelement/cy/index.md @@ -0,0 +1,52 @@ +--- +title: "SVGEllipseElement: cy property" +short-title: cy +slug: Web/API/SVGEllipseElement/cy +page-type: web-api-instance-property +browser-compat: api.SVGEllipseElement.cy +--- + +{{APIRef("SVG")}} + +The **`cy`** read-only property of the {{domxref("SVGEllipseElement")}} interface describes the y-axis coordinate of the center of the ellipse as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("cy")}} attribute on the {{SVGElement("ellipse")}} element. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the y-coordinate of the ellipse's center in the user coordinate system. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + +``` + +We can access the computed values of the `cy` attributes: + +```js +const ellipses = document.querySelectorAll("ellipse"); +const cyPos0 = ellipses[0].cy; +const cyPos1 = ellipses[1].cy; + +console.dir(cyPos0.baseVal.value); // output: 75 +console.dir(cyPos1.baseVal.value); // output: 100 (50% of the viewBox height, 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGEllipseElement.cx")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svgellipseelement/rx/index.md b/files/en-us/web/api/svgellipseelement/rx/index.md new file mode 100644 index 000000000000000..4e3a3cdf3b6747a --- /dev/null +++ b/files/en-us/web/api/svgellipseelement/rx/index.md @@ -0,0 +1,52 @@ +--- +title: "SVGEllipseElement: rx property" +short-title: rx +slug: Web/API/SVGEllipseElement/rx +page-type: web-api-instance-property +browser-compat: api.SVGEllipseElement.rx +--- + +{{APIRef("SVG")}} + +The **`rx`** read-only property of the {{domxref("SVGEllipseElement")}} interface describes the x-axis radius of the ellipse as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("rx")}} attribute on the {{SVGElement("ellipse")}} element. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the radius of the ellipse along the x-axis in the user coordinate system. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + +``` + +We can access the computed values of the `rx` attributes: + +```js +const ellipses = document.querySelectorAll("ellipse"); +const rxPos0 = ellipses[0].rx; +const rxPos1 = ellipses[1].rx; + +console.dir(rxPos0.baseVal.value); // output: 30 +console.dir(rxPos1.baseVal.value); // output: 20 (10% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGEllipseElement.ry")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svgellipseelement/ry/index.md b/files/en-us/web/api/svgellipseelement/ry/index.md new file mode 100644 index 000000000000000..a6e24e692594615 --- /dev/null +++ b/files/en-us/web/api/svgellipseelement/ry/index.md @@ -0,0 +1,52 @@ +--- +title: "SVGEllipseElement: ry property" +short-title: ry +slug: Web/API/SVGEllipseElement/ry +page-type: web-api-instance-property +browser-compat: api.SVGEllipseElement.ry +--- + +{{APIRef("SVG")}} + +The **`ry`** read-only property of the {{domxref("SVGEllipseElement")}} interface describes the y-axis radius of the ellipse as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("ry")}} attribute on the {{SVGElement("ellipse")}} element. + +The attribute value is a [``](/en-US/docs/Web/SVG/Content_type#length), [``](/en-US/docs/Web/SVG/Content_type#percentage), or [``](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the radius of the ellipse along the y-axis in the user coordinate system. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +Given the following SVG: + +```html + + + + +``` + +We can access the computed values of the `ry` attributes: + +```js +const ellipses = document.querySelectorAll("ellipse"); +const ryPos0 = ellipses[0].ry; +const ryPos1 = ellipses[1].ry; + +console.dir(ryPos0.baseVal.value); // output: 20 +console.dir(ryPos1.baseVal.value); // output: 10 (5% of 200) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGEllipseElement.rx")}} +- {{domxref("SVGAnimatedLength.baseVal")}}