New Pages: SVGFilterElement (mdn#37410)

* New Pages: SVGFilterElement * Apply suggestions from code review --------- Co-authored-by: Estelle Weyl <[email protected]>
OnkarRuikar · Jan 6, 2025 · ed8d1fc · ed8d1fc
1 parent d864c4f
commit ed8d1fc
Show file tree

Hide file tree

Showing 7 changed files with 339 additions and 0 deletions.
diff --git a/files/en-us/web/api/svgfilterelement/filterunits/index.md b/files/en-us/web/api/svgfilterelement/filterunits/index.md
@@ -0,0 +1,63 @@
+---
+title: "SVGFilterElement: filterUnits property"
+short-title: filterUnits
+slug: Web/API/SVGFilterElement/filterUnits
+page-type: web-api-instance-property
+browser-compat: api.SVGFilterElement.filterUnits
+---
+
+{{APIRef("SVG")}}
+
+The **`filterUnits`** read-only property of the {{domxref("SVGFilterElement")}} interface reflects the {{SVGAttr("filterUnits")}} attribute of the given {{SVGElement("filter")}} element. It takes one of the `SVG_UNIT_TYPE_*` constants defined in {{domxref("SVGUnitTypes")}}.
+
+## Value
+
+An {{domxref("SVGAnimatedEnumeration")}}.
+
+## Examples
+
+### Accessing the `filterUnits` property
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
+  <defs>
+    <filter
+      id="myFilter"
+      filterUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="200%"
+      height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blurred" />
+    </filter>
+  </defs>
+  <rect
+    width="200"
+    height="200"
+    stroke="green"
+    stroke-width="10"
+    fill="lime"
+    filter="url(#myFilter)" />
+</svg>
+```
+
+```js
+const filterElement = document.querySelector("filter");
+
+// Access the filterUnits property
+console.log(filterElement.filterUnits.baseVal); // Output: 1 (SVG_UNIT_TYPE_USERSPACEONUSE)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGFilterElement.primitiveUnits")}}
+- {{domxref("SVGUnitTypes")}}
+- [SVG filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes)
diff --git a/files/en-us/web/api/svgfilterelement/height/index.md b/files/en-us/web/api/svgfilterelement/height/index.md
@@ -0,0 +1,40 @@
+---
+title: "SVGFilterElement: height property"
+short-title: height
+slug: Web/API/SVGFilterElement/height
+page-type: web-api-instance-property
+browser-compat: api.SVGFilterElement.height
+---
+
+{{APIRef("SVG")}}
+
+The **`height`** read-only property of the {{domxref("SVGFilterElement")}} interface describes the vertical size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}.
+
+It reflects the {{SVGAttr("height")}} attribute of the {{SVGElement("filter")}} element. The attribute is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length) or a [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage) relative to the height of the filter region. The default value is `100%`. The property value is a length in user coordinate system units.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+```js
+const filter = document.querySelector("filter");
+const verticalSize = filter.height;
+console.log(verticalSize.baseVal.value); // the `height` value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects)
+- [SVG filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes)
+- CSS {{cssxref("blend-mode")}} data type
+- CSS {{cssxref("mix-blend-mode")}} property
diff --git a/files/en-us/web/api/svgfilterelement/href/index.md b/files/en-us/web/api/svgfilterelement/href/index.md
@@ -0,0 +1,55 @@
+---
+title: "SVGFilterElement: href property"
+short-title: href
+slug: Web/API/SVGFilterElement/href
+page-type: web-api-instance-property
+browser-compat: api.SVGFilterElement.href
+---
+
+{{APIRef("SVG")}}
+
+The **`href`** read-only property of the {{domxref("SVGFilterElement")}} interface reflects the {{SVGAttr("href")}} or {{SVGAttr("xlink:href")}} {{deprecated_inline}} attribute of the given {{SVGElement("filter")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedString")}}.
+
+## Examples
+
+### Accessing the `href` property
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
+  <defs>
+    <filter id="myFilter" x="0" y="0" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blurred" />
+    </filter>
+  </defs>
+  <rect
+    width="200"
+    height="200"
+    stroke="green"
+    stroke-width="10"
+    fill="lime"
+    filter="url(#myFilter)" />
+</svg>
+```
+
+```js
+const filterElement = document.querySelector("filter");
+
+// Access the href property
+console.log(filterElement.href.baseVal); // Output: "#myFilter"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- SVG {{SVGAttr("href")}} attribute
diff --git a/files/en-us/web/api/svgfilterelement/primitiveunits/index.md b/files/en-us/web/api/svgfilterelement/primitiveunits/index.md
@@ -0,0 +1,61 @@
+---
+title: "SVGFilterElement: primitiveUnits property"
+short-title: primitiveUnits
+slug: Web/API/SVGFilterElement/primitiveUnits
+page-type: web-api-instance-property
+browser-compat: api.SVGFilterElement.primitiveUnits
+---
+
+{{APIRef("SVG")}}
+
+The **`primitiveUnits`** read-only property of the {{domxref("SVGFilterElement")}} interface reflects the {{SVGAttr("primitiveUnits")}} attribute of the given {{SVGElement("filter")}} element. It takes one of the `SVG_UNIT_TYPE_*` constants defined in {{domxref("SVGUnitTypes")}}.
+
+## Value
+
+An {{domxref("SVGAnimatedEnumeration")}} object.
+
+## Examples
+
+### Accessing the `primitiveUnits` property
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
+  <defs>
+    <filter
+      id="myFilter"
+      primitiveUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="200%"
+      height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blurred" />
+    </filter>
+  </defs>
+  <rect
+    width="200"
+    height="200"
+    stroke="green"
+    stroke-width="10"
+    fill="lime"
+    filter="url(#myFilter)" />
+</svg>
+```
+
+```js
+const filterElement = document.querySelector("filter");
+
+// Access the primitiveUnits property
+console.log(filterElement.primitiveUnits.baseVal); // Output: 1 (SVG_UNIT_TYPE_USERSPACEONUSE)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGFilterElement.filterUnits")}}
diff --git a/files/en-us/web/api/svgfilterelement/width/index.md b/files/en-us/web/api/svgfilterelement/width/index.md
@@ -0,0 +1,40 @@
+---
+title: "SVGFilterElement: width property"
+short-title: width
+slug: Web/API/SVGFilterElement/width
+page-type: web-api-instance-property
+browser-compat: api.SVGFilterElement.width
+---
+
+{{APIRef("SVG")}}
+
+The **`width`** read-only property of the {{domxref("SVGFilterElement")}} interface describes the horizontal size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}.
+
+It reflects the {{SVGAttr("width")}} attribute of the {{SVGElement("filter")}} element. The attribute is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length) or a [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage) relative to the width of the filter region. The default value is `100%`. The property value is a length in user coordinate system units.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+```js
+const filter = document.querySelector("filter");
+const horizontalSize = filter.width;
+console.log(horizontalSize.baseVal.value); // the `width` value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects)
+- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes)
+- CSS {{cssxref("blend-mode")}} data type
+- CSS {{cssxref("mix-blend-mode")}} property
diff --git a/files/en-us/web/api/svgfilterelement/x/index.md b/files/en-us/web/api/svgfilterelement/x/index.md
@@ -0,0 +1,40 @@
+---
+title: "SVGFilterElement: x property"
+short-title: x
+slug: Web/API/SVGFilterElement/x
+page-type: web-api-instance-property
+browser-compat: api.SVGFilterElement.x
+---
+
+{{APIRef("SVG")}}
+
+The **`x`** read-only property of the {{domxref("SVGFilterElement")}} interface describes the horizontal coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}.
+
+It reflects the {{SVGAttr("x")}} attribute of the {{SVGElement("filter")}} element. The attribute is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length) or [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage). The `<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. If the `x` attribute is a percent value, the property value is relative to the width of the filter region in user coordinate system units. The default value is `0`.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+```js
+const filter = document.querySelector("filter");
+const leftPosition = filter.x;
+console.log(leftPosition.baseVal.value); // the `x` value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects)
+- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes)
+- CSS {{cssxref("blend-mode")}} data type
+- CSS {{cssxref("mix-blend-mode")}} property
diff --git a/files/en-us/web/api/svgfilterelement/y/index.md b/files/en-us/web/api/svgfilterelement/y/index.md
@@ -0,0 +1,40 @@
+---
+title: "SVGFilterElement: y property"
+short-title: "y"
+slug: Web/API/SVGFilterElement/y
+page-type: web-api-instance-property
+browser-compat: api.SVGFilterElement.y
+---
+
+{{APIRef("SVG")}}
+
+The **`y`** read-only property of the {{domxref("SVGFilterElement")}} interface describes the vertical coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}.
+
+It reflects the {{SVGAttr("y")}} attribute of the {{SVGElement("filter")}} element. The attribute is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length) or [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage). The `<coordinate>` is a length in the user coordinate system that is the given distance from the origin of the filter along the y-axis. If the `y` attribute is a percent value, the property value is a relative to the height of the filter region in user coordinate system units. The default value is `0`.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+```js
+const filter = document.querySelector("filter");
+const topPosition = filter.y;
+console.log(topPosition.baseVal.value); // the `y` value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects)
+- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes)
+- CSS {{cssxref("blend-mode")}} data type
+- CSS {{cssxref("mix-blend-mode")}} property