New Pages: SVGFECompositeElement

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

@@ -0,0 +1,53 @@
+---
+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,53 @@
+---
+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">
+    <feImage
+      href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+      width="200" />
+    <feComposite in2="SourceAlpha" operator="over" />
+    <feComposite in2="SourceAlpha" operator="in" />
+  </filter>
+  <circle cx="50" cy="50" r="30" 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,59 @@
+---
+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">
+    <feImage
+      href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+      width="140"
+      x="30"
+      y="10" />
+    <feComposite
+      in2="SourceGraphic"
+      operator="arithmetic"
+      k1="0.1"
+      k2="0.2"
+      k3="0.3"
+      k4="0.4" />
+  </filter>
+  <circle cx="100" cy="50" r="30" filter="url(#filter1)" />
+</svg>
+```
+
+We can access the `k1` attribute:
+
+```js
+const composites = document.querySelectorAll("feComposite");
+
+console.log(composites[0].k1.baseVal); // output: 0.1
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}

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

@@ -0,0 +1,59 @@
+---
+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">
+    <feImage
+      href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+      width="140"
+      x="30"
+      y="10" />
+    <feComposite
+      in2="SourceGraphic"
+      operator="arithmetic"
+      k1="0.1"
+      k2="0.2"
+      k3="0.3"
+      k4="0.4" />
+  </filter>
+  <circle cx="100" cy="50" r="30" filter="url(#filter1)" />
+</svg>
+```
+
+We can access the `k2` attribute:
+
+```js
+const composites = document.querySelectorAll("feComposite");
+
+console.log(composites[0].k2.baseVal); // output: 0.2
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}

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

@@ -0,0 +1,59 @@
+---
+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">
+    <feImage
+      href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+      width="140"
+      x="30"
+      y="10" />
+    <feComposite
+      in2="SourceGraphic"
+      operator="arithmetic"
+      k1="0.1"
+      k2="0.2"
+      k3="0.3"
+      k4="0.4" />
+  </filter>
+  <circle cx="100" cy="50" r="30" filter="url(#filter1)" />
+</svg>
+```
+
+We can access the `k3` attribute:
+
+```js
+const composites = document.querySelectorAll("feComposite");
+
+console.log(composites[0].k3.baseVal); // output: 0.3
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}

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

@@ -0,0 +1,59 @@
+---
+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">
+    <feImage
+      href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+      width="140"
+      x="30"
+      y="10" />
+    <feComposite
+      in2="SourceGraphic"
+      operator="arithmetic"
+      k1="0.1"
+      k2="0.2"
+      k3="0.3"
+      k4="0.4" />
+  </filter>
+  <circle cx="100" cy="50" r="30" filter="url(#filter1)" />
+</svg>
+```
+
+We can access the `k4` attribute:
+
+```js
+const composites = document.querySelectorAll("feComposite");
+
+console.log(composites[0].k4.baseVal); // output: 0.4
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}