New Pages: SVGFEBlendElement props (mdn#37417)

Lall-091 · Feb 2, 2025 · ecd1c8e · ecd1c8e
1 parent 74fe56c
commit ecd1c8e
Show file tree

Hide file tree

Showing 3 changed files with 180 additions and 0 deletions.
diff --git a/files/en-us/web/api/svgfeblendelement/in1/index.md b/files/en-us/web/api/svgfeblendelement/in1/index.md
@@ -0,0 +1,62 @@
+---
+title: "SVGFEBlendElement: in1 property"
+short-title: in1
+slug: Web/API/SVGFEBlendElement/in1
+page-type: web-api-instance-property
+browser-compat: api.SVGFEBlendElement.in1
+---
+
+{{APIRef("SVG")}}
+
+The **`in1`** read-only property of the {{domxref("SVGFEBlendElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given element.
+
+## Value
+
+An {{domxref("SVGAnimatedString")}} object.
+
+## Examples
+
+In this example, two {{SVGElement("feBlend")}} elements are defined in a filter, each with a different `in` attribute.
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <filter id="blend-filter">
+    <feBlend in="SourceGraphic" operator="over" />
+    <feBlend in="BackgroundImage" operator="in" />
+  </filter>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:red;"
+    filter="url(#blend-filter)" />
+  <circle
+    cx="100"
+    cy="100"
+    r="50"
+    style="fill:blue;"
+    filter="url(#blend-filter)" />
+</svg>
+```
+
+We can access the `in` attribute:
+
+```js
+const feBlends = document.querySelectorAll("feBlend");
+
+console.log(feBlends[0].in1.baseVal); // Output: "SourceGraphic"
+console.log(feBlends[1].in1.baseVal); // Output: "BackgroundImage"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedString")}}
diff --git a/files/en-us/web/api/svgfeblendelement/in2/index.md b/files/en-us/web/api/svgfeblendelement/in2/index.md
@@ -0,0 +1,62 @@
+---
+title: "SVGFEBlendElement: in2 property"
+short-title: in2
+slug: Web/API/SVGFEBlendElement/in2
+page-type: web-api-instance-property
+browser-compat: api.SVGFEBlendElement.in2
+---
+
+{{APIRef("SVG")}}
+
+The **`in2`** read-only property of the {{domxref("SVGFEBlendElement")}} interface reflects the {{SVGAttr("in2")}} attribute of the given element.
+
+## Value
+
+An {{domxref("SVGAnimatedString")}} object.
+
+## Examples
+
+In this example, two {{SVGElement("feBlend")}} elements are defined in a filter, each with a different `in2` attribute.
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <filter id="blend-filter">
+    <feBlend in="SourceGraphic" in2="SourceAlpha" operator="over" />
+    <feBlend in="SourceGraphic" in2="BackgroundImage" operator="in" />
+  </filter>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:red;"
+    filter="url(#blend-filter)" />
+  <circle
+    cx="100"
+    cy="100"
+    r="50"
+    style="fill:blue;"
+    filter="url(#blend-filter)" />
+</svg>
+```
+
+We can access the `in2` attribute:
+
+```js
+const feBlends = document.querySelectorAll("feBlend");
+
+console.log(feBlends[0].in2.baseVal); // Output: "SourceAlpha"
+console.log(feBlends[1].in2.baseVal); // Output: "BackgroundImage"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedString")}}
diff --git a/files/en-us/web/api/svgfeblendelement/mode/index.md b/files/en-us/web/api/svgfeblendelement/mode/index.md
@@ -0,0 +1,56 @@
+---
+title: "SVGFEBlendElement: mode property"
+short-title: mode
+slug: Web/API/SVGFEBlendElement/mode
+page-type: web-api-instance-property
+browser-compat: api.SVGFEBlendElement.mode
+---
+
+{{APIRef("SVG")}}
+
+The **`mode`** read-only property of the {{domxref("SVGFEBlendElement")}} interface reflects the {{SVGAttr("mode")}} attribute of the given element. It takes one of the `SVG_FEBLEND_MODE_*` constants defined on this interface.
+
+## Value
+
+An {{domxref("SVGAnimatedEnumeration")}}.
+
+## Examples
+
+### Accessing the `mode` property
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <filter id="blend-filter">
+    <feBlend in="SourceGraphic" in2="SourceAlpha" mode="multiply" />
+    <feBlend in="SourceGraphic" in2="BackgroundImage" mode="screen" />
+  </filter>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:red;"
+    filter="url(#blend-filter)" />
+  <circle
+    cx="100"
+    cy="100"
+    r="50"
+    style="fill:blue;"
+    filter="url(#blend-filter)" />
+</svg>
+```
+
+```js
+const blends = document.querySelectorAll("feBlend");
+
+console.log(blends[0].mode.baseVal); // Output: 2 (SVG_FEBLEND_MODE_MULTIPLY)
+console.log(blends[1].mode.baseVal); // Output: 3 (SVG_FEBLEND_MODE_SCREEN)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}