New Pages SVGFEMorphologyElement and SVGFEMergeNodeElement props (#37435

)
mdn · Jan 7, 2025 · 55a2df9 · 55a2df9
1 parent e9ef767
commit 55a2df9
Show file tree

Hide file tree

Showing 5 changed files with 294 additions and 0 deletions.
diff --git a/files/en-us/web/api/svgfemergenodeelement/in1/index.md b/files/en-us/web/api/svgfemergenodeelement/in1/index.md
@@ -0,0 +1,60 @@
+---
+title: "SVGFEMergeNodeElement: in1 property"
+short-title: in1
+slug: Web/API/SVGFEMergeNodeElement/in1
+page-type: web-api-instance-property
+browser-compat: api.SVGFEMergeNodeElement.in1
+---
+
+{{APIRef("SVG")}}
+
+The **`in1`** read-only property of the {{domxref("SVGFEMergeNodeElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feMergeNode")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedString")}} object.
+
+## Examples
+
+### Accessing the `in` Property of `feMergeNode` Element
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="mergeFilter">
+      <!-- Merges two inputs -->
+      <feMerge>
+        <feMergeNode in="SourceGraphic" />
+        <feMergeNode in="BackgroundImage" />
+      </feMerge>
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:lightblue;"
+    filter="url(#mergeFilter)" />
+</svg>
+```
+
+We can access the `in` attribute of the `feMergeNode` element.
+
+```js
+// Select the first feMergeNode element
+const mergeNode = document.querySelector("feMergeNode");
+console.log(mergeNode.in1.baseVal); // Output: "SourceGraphic"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedString")}}
diff --git a/files/en-us/web/api/svgfemorphologyelement/in1/index.md b/files/en-us/web/api/svgfemorphologyelement/in1/index.md
@@ -0,0 +1,57 @@
+---
+title: "SVGFEMorphologyElement: in1 property"
+short-title: in1
+slug: Web/API/SVGFEMorphologyElement/in1
+page-type: web-api-instance-property
+browser-compat: api.SVGFEMorphologyElement.in1
+---
+
+{{APIRef("SVG")}}
+
+The **`in1`** read-only property of the {{domxref("SVGFEMorphologyElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feMorphology")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedString")}} object.
+
+## Examples
+
+### Accessing the `in` Property of `feMorphology` Element
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="morphologyFilter">
+      <!-- Applies a morphology filter to the SourceGraphic -->
+      <feMorphology in="SourceGraphic" operator="dilate" radius="2" />
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:lightblue;"
+    filter="url(#morphologyFilter)" />
+</svg>
+```
+
+We can access the `in` attribute of the `feMorphology` element.
+
+```js
+// Select the feMorphology element
+const morphologyNode = document.querySelector("feMorphology");
+console.log(morphologyNode.in1.baseVal); // Output: "SourceGraphic"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedString")}}
diff --git a/files/en-us/web/api/svgfemorphologyelement/operator/index.md b/files/en-us/web/api/svgfemorphologyelement/operator/index.md
@@ -0,0 +1,59 @@
+---
+title: "SVGFEMorphologyElement: operator property"
+short-title: operator
+slug: Web/API/SVGFEMorphologyElement/operator
+page-type: web-api-instance-property
+browser-compat: api.SVGFEMorphologyElement.operator
+---
+
+{{APIRef("SVG")}}
+
+The **`operator`** read-only property of the {{domxref("SVGFEMorphologyElement")}} interface reflects the {{SVGAttr("operator")}} attribute of the given {{SVGElement("feMorphology")}} element. It takes one of the `SVG_MORPHOLOGY_OPERATOR_*` constants defined on this interface.
+
+## Value
+
+An {{domxref("SVGAnimatedEnumeration")}} object.
+
+## Examples
+
+### Accessing the `operator` Property
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="morphologyFilter">
+      <!-- Applies a morphology filter with the "dilate" operator -->
+      <feMorphology in="SourceGraphic" operator="dilate" radius="3" />
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:lightblue;"
+    filter="url(#morphologyFilter)" />
+</svg>
+```
+
+```js
+// Select the feMorphology element
+const morphologyNode = document.querySelector("feMorphology");
+
+// Access the 'operator' property
+const operatorEnum = morphologyNode.operator.baseVal;
+
+console.log(operatorEnum); // Output: 2 (SVG_MORPHOLOGY_OPERATOR_DILATE)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedEnumeration")}}
diff --git a/files/en-us/web/api/svgfemorphologyelement/radiusx/index.md b/files/en-us/web/api/svgfemorphologyelement/radiusx/index.md
@@ -0,0 +1,59 @@
+---
+title: "SVGFEMorphologyElement: radiusX property"
+short-title: radiusX
+slug: Web/API/SVGFEMorphologyElement/radiusX
+page-type: web-api-instance-property
+browser-compat: api.SVGFEMorphologyElement.radiusX
+---
+
+{{APIRef("SVG")}}
+
+The **`radiusX`** read-only property of the {{domxref("SVGFEMorphologyElement")}} interface reflects the X component of the {{SVGAttr("radius")}} attribute of the given {{SVGElement("feMorphology")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Accessing the `radiusX` Property
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="morphologyFilter">
+      <!-- Applies a morphology filter with a specific radius -->
+      <feMorphology in="SourceGraphic" operator="dilate" radius="5 3" />
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:lightblue;"
+    filter="url(#morphologyFilter)" />
+</svg>
+```
+
+```js
+// Select the feMorphology element
+const morphologyNode = document.querySelector("feMorphology");
+
+// Access the radiusX property
+const radiusX = morphologyNode.radiusX.baseVal;
+
+console.log(`The X radius is: ${radiusX}`); // Output: 5
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}
diff --git a/files/en-us/web/api/svgfemorphologyelement/radiusy/index.md b/files/en-us/web/api/svgfemorphologyelement/radiusy/index.md
@@ -0,0 +1,59 @@
+---
+title: "SVGFEMorphologyElement: radiusY property"
+short-title: radiusY
+slug: Web/API/SVGFEMorphologyElement/radiusY
+page-type: web-api-instance-property
+browser-compat: api.SVGFEMorphologyElement.radiusY
+---
+
+{{APIRef("SVG")}}
+
+The **`radiusY`** read-only property of the {{domxref("SVGFEMorphologyElement")}} interface reflects the Y component of the {{SVGAttr("radius")}} attribute of the given {{SVGElement("feMorphology")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Accessing the `radiusY` Property
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="morphologyFilter">
+      <!-- Applies a morphology filter with a specific radius -->
+      <feMorphology in="SourceGraphic" operator="dilate" radius="5 3" />
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:lightblue;"
+    filter="url(#morphologyFilter)" />
+</svg>
+```
+
+```js
+// Select the feMorphology element
+const morphologyNode = document.querySelector("feMorphology");
+
+// Access the radiusY property
+const radiusY = morphologyNode.radiusY.baseVal;
+
+console.log(`The Y radius is: ${radiusY}`); // Output: 3
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}