diff --git a/files/en-us/web/api/svgfecompositeelement/in1/index.md b/files/en-us/web/api/svgfecompositeelement/in1/index.md new file mode 100644 index 000000000000000..32607defbe469fb --- /dev/null +++ b/files/en-us/web/api/svgfecompositeelement/in1/index.md @@ -0,0 +1,50 @@ +--- +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 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 + + + + + + + +``` + +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")}} diff --git a/files/en-us/web/api/svgfecompositeelement/in2/index.md b/files/en-us/web/api/svgfecompositeelement/in2/index.md new file mode 100644 index 000000000000000..b3be7ae8d157755 --- /dev/null +++ b/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 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 + + + + + + + +``` + +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")}} diff --git a/files/en-us/web/api/svgfecompositeelement/index.md b/files/en-us/web/api/svgfecompositeelement/index.md index 0e0cdef3c3568c0..d5bb28683af54be 100644 --- a/files/en-us/web/api/svgfecompositeelement/index.md +++ b/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}} diff --git a/files/en-us/web/api/svgfecompositeelement/k1/index.md b/files/en-us/web/api/svgfecompositeelement/k1/index.md new file mode 100644 index 000000000000000..e391ffefd6f3396 --- /dev/null +++ b/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 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 + + + + + + + +``` + +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")}} diff --git a/files/en-us/web/api/svgfecompositeelement/k2/index.md b/files/en-us/web/api/svgfecompositeelement/k2/index.md new file mode 100644 index 000000000000000..1d7cc9ac9884225 --- /dev/null +++ b/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 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 + + + + + + + +``` + +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")}} diff --git a/files/en-us/web/api/svgfecompositeelement/k3/index.md b/files/en-us/web/api/svgfecompositeelement/k3/index.md new file mode 100644 index 000000000000000..346a9689041eb4b --- /dev/null +++ b/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 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 + + + + + + + +``` + +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")}} diff --git a/files/en-us/web/api/svgfecompositeelement/k4/index.md b/files/en-us/web/api/svgfecompositeelement/k4/index.md new file mode 100644 index 000000000000000..fa70dcae8fbb0bf --- /dev/null +++ b/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 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 + + + + + + + +``` + +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")}} diff --git a/files/en-us/web/api/svgfecompositeelement/operator/index.md b/files/en-us/web/api/svgfecompositeelement/operator/index.md new file mode 100644 index 000000000000000..dd6a897be8fce11 --- /dev/null +++ b/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 element. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}} object. + +## Examples + +Using `over` operator in {{SVGElement("feComposite")}} element. + +```html + + + + + + + +``` + +Using `xor` operator on the same element. + +```html + + + + + + + +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedEnumeration")}}