From 52371180145dc5a36911ae280aee54499964c742 Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 19 Dec 2024 14:36:52 -0800 Subject: [PATCH 1/7] New pages: SVGSVGElement API properties --- .../web/api/svgsvgelement/viewbox/index.md | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 files/en-us/web/api/svgsvgelement/viewbox/index.md 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..5be761e55ba90f4 --- /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", "widht")}}, 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")}} From 53026cf140cb3cd4b5a05f7e0a0d18fe8db2be6b Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 19 Dec 2024 14:37:59 -0800 Subject: [PATCH 2/7] New pages: SVGSVGElement API properties --- files/en-us/web/api/svgsvgelement/x/index.md | 38 ++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 files/en-us/web/api/svgsvgelement/x/index.md 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")}} From 42bd8cf639ded6c09f900d8223f5855470f8ecd5 Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 19 Dec 2024 14:38:12 -0800 Subject: [PATCH 3/7] New pages: SVGSVGElement API properties --- files/en-us/web/api/svgsvgelement/y/index.md | 38 ++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 files/en-us/web/api/svgsvgelement/y/index.md 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..414c0e029627fdc --- /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")}} From f1bf48aea3fb74a5e6bf6d6404c76940a029466a Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 19 Dec 2024 14:40:03 -0800 Subject: [PATCH 4/7] New pages: SVGSVGElement API properties --- .../web/api/svgsvgelement/width/index.md | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 files/en-us/web/api/svgsvgelement/width/index.md 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..c6a0334a07e2c5d --- /dev/null +++ b/files/en-us/web/api/svgsvgelement/width/index.md @@ -0,0 +1,42 @@ +--- +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. + +An SVG's size is primarily defined by CSS box model properties, while the `width` property reflects the `width` attribute, if present, otherwise, the width component of the {{SVGAttr("viewBox")}} attribute, if set. The `width` property is a number providing a relative value in user coordinate system, not browser pixels. Several features impact the inline dimension of an `` element, with some impacting the {{domxref("DOMRect.width")}} width but not this property when the `width` attribute is present. In an HTML document, if both the {{SVGAttr("viewBox")}} and `width` attributes are omitted, the `width` property reflects that actual width. If no {{cssxref("width")}} or logical properties defined the width, the `` element will be rendered with a width of `300px`. In this case, the `width` will be `300` or less, as the `width` is the size of the viewport's content-box size (the width minus any border and padding). + +The `width` property of a nested `` is determined by it's `width` attribute, if defined, with percentage values being relative to the containing SVG. Otherwise, the `width` is the same as the `` in which it is contained. The CSS `width` property doesn't apply to nested SVG elements. + +As noted above, CSS {{cssxref("width")}} property takes precedence over the `` element's `width` attribute, so the value may not reflect the element's appearance. + +## 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")}} From 6319b0153547d7e9a5cda0ffe51d628cf07c498d Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 19 Dec 2024 16:15:06 -0800 Subject: [PATCH 5/7] new page: SVGSVGElement.height --- .../web/api/svgsvgelement/height/index.md | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 files/en-us/web/api/svgsvgelement/height/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..20f2b27157c4a72 --- /dev/null +++ b/files/en-us/web/api/svgsvgelement/height/index.md @@ -0,0 +1,45 @@ +--- +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. + +Several features impact the vertical dimension of an `` element, with some impacting the {{domxref("DOMRect.height")}} height but not this property when the `height` attribute is present. An SVG's size is primarily defined by CSS box model properties, overriding the `height` attribute, which the `height` property reflects. For non-nested SVGs, the vertical size may be the height component of the {{SVGAttr("viewBox")}} attribute, if set. + +In an HTML document, if both the {{SVGAttr("viewBox")}} and `height` attributes are omitted, the `height` property reflects that actual height. If no {{cssxref("height")}} or logical properties define the height, the `` element will be rendered with a height of `200px`. In this case, the `height` will be `200` or less, as the `height` is the size of the viewport's content-box size (the height minus any border and padding). The value would be `200`, not `200px`, as the `height` property is a number providing a relative value in user coordinate system units, not browser pixels. + +The `height` property of a nested `` is determined by it's `height` attribute, if defined, with percentage values being relative to the height of the containing SVG. If omitted, the `height` is the same as the `` in which it is contained. + +As noted above, CSS {{cssxref("height")}} property takes precedence over the `` element's `height` attribute, so the value may not reflect the element's appearance. The CSS `height` property doesn't apply to nested SVG elements. + +## 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")}} From fc6779a694a36f55dd5ed36434844d3a8b1b1054 Mon Sep 17 00:00:00 2001 From: estelle Date: Wed, 5 Feb 2025 16:15:58 -0800 Subject: [PATCH 6/7] updates per review --- files/en-us/web/api/svgsvgelement/height/index.md | 10 ++-------- files/en-us/web/api/svgsvgelement/width/index.md | 8 ++------ files/en-us/web/api/svgsvgelement/y/index.md | 2 +- 3 files changed, 5 insertions(+), 15 deletions(-) diff --git a/files/en-us/web/api/svgsvgelement/height/index.md b/files/en-us/web/api/svgsvgelement/height/index.md index 20f2b27157c4a72..02d8d391c7a6fce 100644 --- a/files/en-us/web/api/svgsvgelement/height/index.md +++ b/files/en-us/web/api/svgsvgelement/height/index.md @@ -8,15 +8,9 @@ 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. +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. -Several features impact the vertical dimension of an `` element, with some impacting the {{domxref("DOMRect.height")}} height but not this property when the `height` attribute is present. An SVG's size is primarily defined by CSS box model properties, overriding the `height` attribute, which the `height` property reflects. For non-nested SVGs, the vertical size may be the height component of the {{SVGAttr("viewBox")}} attribute, if set. - -In an HTML document, if both the {{SVGAttr("viewBox")}} and `height` attributes are omitted, the `height` property reflects that actual height. If no {{cssxref("height")}} or logical properties define the height, the `` element will be rendered with a height of `200px`. In this case, the `height` will be `200` or less, as the `height` is the size of the viewport's content-box size (the height minus any border and padding). The value would be `200`, not `200px`, as the `height` property is a number providing a relative value in user coordinate system units, not browser pixels. - -The `height` property of a nested `` is determined by it's `height` attribute, if defined, with percentage values being relative to the height of the containing SVG. If omitted, the `height` is the same as the `` in which it is contained. - -As noted above, CSS {{cssxref("height")}} property takes precedence over the `` element's `height` attribute, so the value may not reflect the element's appearance. The CSS `height` property doesn't apply to nested SVG elements. +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 diff --git a/files/en-us/web/api/svgsvgelement/width/index.md b/files/en-us/web/api/svgsvgelement/width/index.md index c6a0334a07e2c5d..9b5fcc4440b19e5 100644 --- a/files/en-us/web/api/svgsvgelement/width/index.md +++ b/files/en-us/web/api/svgsvgelement/width/index.md @@ -8,13 +8,9 @@ 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. +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. -An SVG's size is primarily defined by CSS box model properties, while the `width` property reflects the `width` attribute, if present, otherwise, the width component of the {{SVGAttr("viewBox")}} attribute, if set. The `width` property is a number providing a relative value in user coordinate system, not browser pixels. Several features impact the inline dimension of an `` element, with some impacting the {{domxref("DOMRect.width")}} width but not this property when the `width` attribute is present. In an HTML document, if both the {{SVGAttr("viewBox")}} and `width` attributes are omitted, the `width` property reflects that actual width. If no {{cssxref("width")}} or logical properties defined the width, the `` element will be rendered with a width of `300px`. In this case, the `width` will be `300` or less, as the `width` is the size of the viewport's content-box size (the width minus any border and padding). - -The `width` property of a nested `` is determined by it's `width` attribute, if defined, with percentage values being relative to the containing SVG. Otherwise, the `width` is the same as the `` in which it is contained. The CSS `width` property doesn't apply to nested SVG elements. - -As noted above, CSS {{cssxref("width")}} property takes precedence over the `` element's `width` attribute, so the value may not reflect the element's appearance. +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 diff --git a/files/en-us/web/api/svgsvgelement/y/index.md b/files/en-us/web/api/svgsvgelement/y/index.md index 414c0e029627fdc..e623c01d275d5f3 100644 --- a/files/en-us/web/api/svgsvgelement/y/index.md +++ b/files/en-us/web/api/svgsvgelement/y/index.md @@ -1,6 +1,6 @@ --- title: "SVGSVGElement: y property" -short-title: "y" +short-title: y slug: Web/API/SVGSVGElement/y page-type: web-api-instance-property browser-compat: api.SVGSVGElement.y From c5f2809c8acaafb4c33d0ab73fcda09363d10d98 Mon Sep 17 00:00:00 2001 From: wbamberg Date: Fri, 14 Feb 2025 12:33:46 -0800 Subject: [PATCH 7/7] Update files/en-us/web/api/svgsvgelement/viewbox/index.md --- files/en-us/web/api/svgsvgelement/viewbox/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/svgsvgelement/viewbox/index.md b/files/en-us/web/api/svgsvgelement/viewbox/index.md index 5be761e55ba90f4..7cd50b69ba8d1e5 100644 --- a/files/en-us/web/api/svgsvgelement/viewbox/index.md +++ b/files/en-us/web/api/svgsvgelement/viewbox/index.md @@ -26,7 +26,7 @@ Give the following SVG opening tag: ``` -We can retrieve the viewBox values, but they differ from the {{domxref("SVGSVGElement.x", "x")}}, {{domxref("SVGSVGElement.y", "y")}}, {{domxref("SVGSVGElement.width", "widht")}}, and {{domxref("SVGSVGElement.height", "height")}} properties: +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");