From be7ff0e5b105020be70e073d3ca362267ecf0845 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Fri, 14 Feb 2025 12:37:21 -0800 Subject: [PATCH] New pages: SVGSVGElement API properties (#37281) * New pages: SVGSVGElement API properties * New pages: SVGSVGElement API properties * New pages: SVGSVGElement API properties * New pages: SVGSVGElement API properties * new page: SVGSVGElement.height * updates per review * Update files/en-us/web/api/svgsvgelement/viewbox/index.md --------- Co-authored-by: wbamberg --- .../web/api/svgsvgelement/height/index.md | 39 ++++++++++++ .../web/api/svgsvgelement/viewbox/index.md | 61 +++++++++++++++++++ .../web/api/svgsvgelement/width/index.md | 38 ++++++++++++ files/en-us/web/api/svgsvgelement/x/index.md | 38 ++++++++++++ files/en-us/web/api/svgsvgelement/y/index.md | 38 ++++++++++++ 5 files changed, 214 insertions(+) create mode 100644 files/en-us/web/api/svgsvgelement/height/index.md create mode 100644 files/en-us/web/api/svgsvgelement/viewbox/index.md create mode 100644 files/en-us/web/api/svgsvgelement/width/index.md create mode 100644 files/en-us/web/api/svgsvgelement/x/index.md create mode 100644 files/en-us/web/api/svgsvgelement/y/index.md diff --git a/files/en-us/web/api/svgsvgelement/height/index.md b/files/en-us/web/api/svgsvgelement/height/index.md new file mode 100644 index 000000000000000..02d8d391c7a6fce --- /dev/null +++ b/files/en-us/web/api/svgsvgelement/height/index.md @@ -0,0 +1,39 @@ +--- +title: "SVGSVGElement: height property" +short-title: height +slug: Web/API/SVGSVGElement/height +page-type: web-api-instance-property +browser-compat: api.SVGSVGElement.height +--- + +{{APIRef("SVG")}} + +The **`height`** read-only property of the {{domxref("SVGSVGElement")}} interface describes the vertical size of element as an {{domxref("SVGAnimatedLength")}}. It reflects the {{SVGElement("svg")}} element's {{SVGAttr("height")}} attribute, which may not be the SVG's rendered height. + +The CSS {{cssxref("height")}} property takes precedence over the `` element's `height` attribute, so the value may not reflect the element's appearance. If both the {{SVGAttr("viewBox")}} and `height` attributes are omitted, the `height` property reflects that actual height. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const svg = document.querySelector("svg"); +const verticalSize = svg.height; +console.dir(verticalSize.baseVal.value); // the `height` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGSVGElement.viewBox")}} +- {{domxref("SVGSVGElement.width")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svgsvgelement/viewbox/index.md b/files/en-us/web/api/svgsvgelement/viewbox/index.md new file mode 100644 index 000000000000000..7cd50b69ba8d1e5 --- /dev/null +++ b/files/en-us/web/api/svgsvgelement/viewbox/index.md @@ -0,0 +1,61 @@ +--- +title: "SVGSVGElement: viewBox property" +short-title: viewBox +slug: Web/API/SVGSVGElement/viewBox +page-type: web-api-instance-property +browser-compat: api.SVGSVGElement.viewBox +--- + +{{APIRef("SVG")}} + +The **`viewBox`** read-only property of the {{domxref("SVGSVGElement")}} interface reflects the {{SVGElement("svg")}} element's {{SVGAttr("viewBox")}} attribute as an {{domxref("SVGAnimatedRect")}}. + +The property describes the `` element's `` attribute, which is used to defined the x-coordinate, y-coordinate, width, and height of an `` element. The {{domxref("SVGAnimatedRect.baseVal")}} and {{domxref("SVGAnimatedRect.animVal")}} properties are both {{domxref("SVGRect")}} objects, or `null` if the `viewBox` is not defined. These objects' components my differ from the {{domxref("SVGSVGElement.x")}}, {{domxref("SVGSVGElement.y")}}, {{domxref("SVGSVGElement.width")}} and {{domxref("SVGSVGElement.height")}} properties, as the {{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}}, and {{SVGAttr("height")}} attributes take precedence over the `viewBox` attribute. + +For non-nested SVG elements, the values of the CSS {{cssxref("x")}}, {{cssxref("y")}}, {{cssxref("width")}}, and {{cssxref("height")}} properties take precedence over any element attributes, so the values defined by the `viewBox` may not be reflected in the element's appearance. + +## Value + +An {{domxref("SVGAnimatedRect")}}. + +## Example + +Give the following SVG opening tag: + +```html + +``` + +We can retrieve the viewBox values, but they differ from the {{domxref("SVGSVGElement.x", "x")}}, {{domxref("SVGSVGElement.y", "y")}}, {{domxref("SVGSVGElement.width", "width")}}, and {{domxref("SVGSVGElement.height", "height")}} properties: + +```js +const svg = document.querySelector("svg"); +const vBox = svg.viewBox; + +// The SVGSVGElement viewBox property +console.dir(vBox); // SVGAnimatedRect { baseVal: SVGRect, animVal: SVGRect } +​console.log(vBox.baseVal.x); // -12 +​console.log(vBox.baseVal.y); // -18 +​console.log(vBox.baseVal.width); // 200 +​console.log(vBox.baseVal.height); // 300 + +// Other SVGSVGElement properties +​console.log(svg.x); // 5 +​console.log(svg.y); // 5 +​console.log(svg.width); // 400 +​console.log(svg.height); // 600 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedRect.baseVal")}} +- {{domxref("SVGAnimatedRect.animVal")}} +- {{SVGAttr("preserveAspectRatio")}} diff --git a/files/en-us/web/api/svgsvgelement/width/index.md b/files/en-us/web/api/svgsvgelement/width/index.md new file mode 100644 index 000000000000000..9b5fcc4440b19e5 --- /dev/null +++ b/files/en-us/web/api/svgsvgelement/width/index.md @@ -0,0 +1,38 @@ +--- +title: "SVGSVGElement: width property" +short-title: width +slug: Web/API/SVGSVGElement/width +page-type: web-api-instance-property +browser-compat: api.SVGSVGElement.width +--- + +{{APIRef("SVG")}} + +The **`width`** read-only property of the {{domxref("SVGSVGElement")}} interface describes the horizontal size of element as an {{domxref("SVGAnimatedLength")}}. It reflects the {{SVGElement("svg")}} element's {{SVGAttr("width")}} attribute, which may not be the SVG's rendered width. + +The CSS {{cssxref("width")}} property takes precedence over the `` element's `width` attribute, so the value may not reflect the element's appearance. If both the {{SVGAttr("viewBox")}} and `width` attributes are omitted, the `width` property reflects that actual width. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const svg = document.querySelector("svg"); +const inlineSize = svg.width; +console.dir(inlineSize.baseVal.value); // the `width` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGSVGElement.viewBox")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svgsvgelement/x/index.md b/files/en-us/web/api/svgsvgelement/x/index.md new file mode 100644 index 000000000000000..9a4d0f3f19528e4 --- /dev/null +++ b/files/en-us/web/api/svgsvgelement/x/index.md @@ -0,0 +1,38 @@ +--- +title: "SVGSVGElement: x property" +short-title: x +slug: Web/API/SVGSVGElement/x +page-type: web-api-instance-property +browser-compat: api.SVGSVGElement.x +--- + +{{APIRef("SVG")}} + +The **`x`** read-only property of the {{domxref("SVGSVGElement")}} interface describes the horizontal coordinate of the position of that SVG as an {{domxref("SVGAnimatedLength")}}. When an {{SVGElement("svg")}} is nested within another ``, the horizontal coordinate is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the x-axis. Its syntax is the same as that for [``](/en-US/docs/Web/SVG/Content_type#length). + +It reflects the {{SVGElement("svg")}} element's {{SVGAttr("x")}} geometric attribute. The default value is `0`. The `x` attribute has no effect on outermost `` elements; only one nested ones. The CSS {{cssxref("x")}} property takes precedence over the `` element's `x` attribute, so the value may not reflect the element's appearance. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const svg = document.querySelector("svg"); +const leftPosition = svg.x; +console.dir(leftPosition.baseVal.value); // the `x` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGSVGElement.y")}} +- {{domxref("SVGAnimatedLength.baseVal")}} diff --git a/files/en-us/web/api/svgsvgelement/y/index.md b/files/en-us/web/api/svgsvgelement/y/index.md new file mode 100644 index 000000000000000..e623c01d275d5f3 --- /dev/null +++ b/files/en-us/web/api/svgsvgelement/y/index.md @@ -0,0 +1,38 @@ +--- +title: "SVGSVGElement: y property" +short-title: y +slug: Web/API/SVGSVGElement/y +page-type: web-api-instance-property +browser-compat: api.SVGSVGElement.y +--- + +{{APIRef("SVG")}} + +The **`y`** read-only property of the {{domxref("SVGSVGElement")}} interface describes the vertical coordinate of the position of that SVG as an {{domxref("SVGAnimatedLength")}}. When an {{SVGElement("svg")}} is nested within another ``, the vertical coordinate is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the y-axis. Its syntax is the same as that for [``](/en-US/docs/Web/SVG/Content_type#length). + +It reflects the {{SVGElement("svg")}} element's {{SVGAttr("y")}} geometric attribute. The default value is `0`. The `y` attribute has no effect on outermost `` elements; only on nested ones. The CSS {{cssxref("y")}} property takes precedence over the `` element's `y` attribute, so the value may not reflect the element's appearance. + +## Value + +An {{domxref("SVGAnimatedLength")}}. + +## Example + +```js +const svg = document.querySelector("svg"); +const topPosition = svg.y; +console.dir(leftPosition.baseVal.value); // the `y` value +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGSVGElement.x")}} +- {{domxref("SVGAnimatedLength.baseVal")}}