New Pages: SVGFECompositeElement

files/en-us/web/api/svgfecompositeelement/in1/index.md

@@ -0,0 +1,51 @@
+---
+title: "SVGFECompositeElement: in1 property"
+short-title: in1
+slug: Web/API/SVGFECompositeElement/in1
+page-type: web-api-instance-property
+browser-compat: api.SVGFECompositeElement.in1
+---
+
+{{APIRef("SVG")}}
+
+The **`in1`** read-only property of the {{domxref("SVGFECompositeElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feComposite")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedString")}} object.
+
+## Examples
+
+In this example, two {{SVGElement("feComposite")}} 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="filter1">
+  <feImage href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"  width="200" />
+    <feComposite in="SourceGraphic" operator="over" />
+    <feComposite in="SourceGraphic" operator="in" />
+  </filter>
+  <circle cx="50" cy="50" r="30" filter="url(#filter1)" />
+</svg>
+```
+
+We can access the `in` attribute:
+
+```js
+const composites = document.querySelectorAll("feComposite");
+
+console.log(composites[0].in1.baseVal); // output: "SourceGraphic"
+console.log(composites[1].in1.baseVal); // output: "SourceGraphic"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedString")}}

files/en-us/web/api/svgfecompositeelement/in2/index.md

@@ -0,0 +1,50 @@
+---
+title: "SVGFECompositeElement: in2 property"
+short-title: in2
+slug: Web/API/SVGFECompositeElement/in2
+page-type: web-api-instance-property
+browser-compat: api.SVGFECompositeElement.in2
+---
+
+{{APIRef("SVG")}}
+
+The **`in2`** read-only property of the {{domxref("SVGFECompositeElement")}} interface reflects the {{SVGAttr("in2")}} attribute of the given {{SVGElement("feComposite")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedString")}} object.
+
+## Examples
+
+In this example, two {{SVGElement("feComposite")}} 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="filter1">
+    <feComposite in2="SourceAlpha" operator="over" />
+    <feComposite in2="SourceAlpha" operator="in" />
+  </filter>
+  <rect width="100" height="100" style="fill:red;" filter="url(#filter1)" />
+</svg>
+```
+
+We can access the `in2` attribute:
+
+```js
+const composites = document.querySelectorAll("feComposite");
+
+console.log(composites[0].in2.baseVal); // output: "SourceAlpha"
+console.log(composites[1].in2.baseVal); // output: "SourceAlpha"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedString")}}

files/en-us/web/api/svgfecompositeelement/index.md

@@ -70,6 +70,18 @@ _This interface also inherits properties from its parent interface, {{domxref("S
   - : An {{domxref("SVGAnimatedLength")}} corresponding to the {{SVGAttr("height")}} attribute of the given element.
 - {{domxref("SVGFECompositeElement.in1")}} {{ReadOnlyInline}}
   - : An {{domxref("SVGAnimatedString")}} corresponding to the {{SVGAttr("in")}} attribute of the given element.
+- {{domxref("SVGFECompositeElement.in2")}} {{ReadOnlyInline}}
+  - : An {{domxref("SVGAnimatedString")}} corresponding to the {{SVGAttr("in2")}} attribute of the given element.
+- {{domxref("SVGFECompositeElement.operator")}} {{ReadOnlyInline}}
+  - : An {{domxref("SVGAnimatedEnumeration")}} corresponding to the {{SVGAttr("operator")}} attribute of the given element.
+- {{domxref("SVGFECompositeElement.k1")}} {{ReadOnlyInline}}
+  - : An {{domxref("SVGAnimatedNumber")}} corresponding to the {{SVGAttr("k1")}} attribute of the given element.
+- {{domxref("SVGFECompositeElement.k2")}} {{ReadOnlyInline}}
+  - : An {{domxref("SVGAnimatedNumber")}} corresponding to the {{SVGAttr("k2")}} attribute of the given element.
+- {{domxref("SVGFECompositeElement.k3")}} {{ReadOnlyInline}}
+  - : An {{domxref("SVGAnimatedNumber")}} corresponding to the {{SVGAttr("k3")}} attribute of the given element.
+- {{domxref("SVGFECompositeElement.k4")}} {{ReadOnlyInline}}
+  - : An {{domxref("SVGAnimatedNumber")}} corresponding to the {{SVGAttr("k4")}} attribute of the given element.
 - {{domxref("SVGFECompositeElement.result")}} {{ReadOnlyInline}}
   - : An {{domxref("SVGAnimatedString")}} corresponding to the {{SVGAttr("result")}} attribute of the given element.
 - {{domxref("SVGFECompositeElement.type")}} {{ReadOnlyInline}}

files/en-us/web/api/svgfecompositeelement/k1/index.md

@@ -0,0 +1,50 @@
+---
+title: "SVGFECompositeElement: k1 property"
+short-title: k1
+slug: Web/API/SVGFECompositeElement/k1
+page-type: web-api-instance-property
+browser-compat: api.SVGFECompositeElement.k1
+---
+
+{{APIRef("SVG")}}
+
+The **`k1`** read-only property of the {{domxref("SVGFECompositeElement")}} interface reflects the {{SVGAttr("k1")}} attribute of the given {{SVGElement("feComposite")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+In this example, two {{SVGElement("feComposite")}} elements are defined in a filter, each with a different `k1` attribute.
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <filter id="filter1">
+    <feComposite k1="1" k2="2" k3="3" k4="4" operator="over" />
+    <feComposite k1="5" k2="6" k3="7" k4="8" operator="in" />
+  </filter>
+  <rect width="100" height="100" style="fill:red;" filter="url(#filter1)" />
+</svg>
+```
+
+We can access the `k1` attribute:
+
+```js
+const composites = document.querySelectorAll("feComposite");
+
+console.log(composites[0].k1.baseVal); // output: 1
+console.log(composites[1].k1.baseVal); // output: 5
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}

files/en-us/web/api/svgfecompositeelement/k2/index.md

@@ -0,0 +1,50 @@
+---
+title: "SVGFECompositeElement: k2 property"
+short-title: k2
+slug: Web/API/SVGFECompositeElement/k2
+page-type: web-api-instance-property
+browser-compat: api.SVGFECompositeElement.k2
+---
+
+{{APIRef("SVG")}}
+
+The **`k2`** read-only property of the {{domxref("SVGFECompositeElement")}} interface reflects the {{SVGAttr("k2")}} attribute of the given {{SVGElement("feComposite")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+In this example, two {{SVGElement("feComposite")}} elements are defined in a filter, each with a different `k2` attribute.
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <filter id="filter1">
+    <feComposite k1="1" k2="2" k3="3" k4="4" operator="over" />
+    <feComposite k1="5" k2="6" k3="7" k4="8" operator="in" />
+  </filter>
+  <rect width="100" height="100" style="fill:red;" filter="url(#filter1)" />
+</svg>
+```
+
+We can access the `k2` attribute:
+
+```js
+const composites = document.querySelectorAll("feComposite");
+
+console.log(composites[0].k2.baseVal); // output: 2
+console.log(composites[1].k2.baseVal); // output: 6
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}

files/en-us/web/api/svgfecompositeelement/k3/index.md

@@ -0,0 +1,50 @@
+---
+title: "SVGFECompositeElement: k3 property"
+short-title: k3
+slug: Web/API/SVGFECompositeElement/k3
+page-type: web-api-instance-property
+browser-compat: api.SVGFECompositeElement.k3
+---
+
+{{APIRef("SVG")}}
+
+The **`k3`** read-only property of the {{domxref("SVGFECompositeElement")}} interface reflects the {{SVGAttr("k3")}} attribute of the given {{SVGElement("feComposite")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+In this example, two {{SVGElement("feComposite")}} elements are defined in a filter, each with a different `k3` attribute.
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <filter id="filter1">
+    <feComposite k1="1" k2="2" k3="3" k4="4" operator="over" />
+    <feComposite k1="5" k2="6" k3="7" k4="8" operator="in" />
+  </filter>
+  <rect width="100" height="100" style="fill:red;" filter="url(#filter1)" />
+</svg>
+```
+
+We can access the `k3` attribute:
+
+```js
+const composites = document.querySelectorAll("feComposite");
+
+console.log(composites[0].k3.baseVal); // output: 3
+console.log(composites[1].k3.baseVal); // output: 7
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}

files/en-us/web/api/svgfecompositeelement/k4/index.md

@@ -0,0 +1,50 @@
+---
+title: "SVGFECompositeElement: k4 property"
+short-title: k4
+slug: Web/API/SVGFECompositeElement/k4
+page-type: web-api-instance-property
+browser-compat: api.SVGFECompositeElement.k4
+---
+
+{{APIRef("SVG")}}
+
+The **`k4`** read-only property of the {{domxref("SVGFECompositeElement")}} interface reflects the {{SVGAttr("k4")}} attribute of the given {{SVGElement("feComposite")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+In this example, two {{SVGElement("feComposite")}} elements are defined in a filter, each with a different `k4` attribute.
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <filter id="filter1">
+    <feComposite k1="1" k2="2" k3="3" k4="4" operator="over" />
+    <feComposite k1="5" k2="6" k3="7" k4="8" operator="in" />
+  </filter>
+  <rect width="100" height="100" style="fill:red;" filter="url(#filter1)" />
+</svg>
+```
+
+We can access the `k4` attribute:
+
+```js
+const composites = document.querySelectorAll("feComposite");
+
+console.log(composites[0].k4.baseVal); // output: 4
+console.log(composites[1].k4.baseVal); // output: 8
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}

files/en-us/web/api/svgfecompositeelement/operator/index.md

@@ -0,0 +1,65 @@
+---
+title: "SVGFECompositeElement: operator property"
+short-title: operator
+slug: Web/API/SVGFECompositeElement/operator
+page-type: web-api-instance-property
+browser-compat: api.SVGFECompositeElement.operator
+---
+
+{{APIRef("SVG")}}
+
+The **`operator`** read-only property of the {{domxref("SVGFECompositeElement")}} interface reflects the {{SVGAttr("operator")}} attribute of the given {{SVGElement("feComposite")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedEnumeration")}} object.
+
+## Examples
+
+Using `over` operator in {{SVGElement("feComposite")}} element.
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <filter id="filter1">
+    <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" />
+  </filter>
+  <rect
+    x="50"
+    y="50"
+    width="100"
+    height="100"
+    style="fill:blue;"
+    filter="url(#filter1)" />
+  <rect x="30" y="30" width="100" height="100" style="fill:green;" />
+</svg>
+```
+
+Using `xor` operator on the same element.
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <filter id="filter1">
+    <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" />
+  </filter>
+  <rect
+    x="50"
+    y="50"
+    width="100"
+    height="100"
+    style="fill:blue;"
+    filter="url(#filter1)" />
+  <rect x="30" y="30" width="100" height="100" style="fill:green;" />
+</svg>
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedEnumeration")}}