diff --git a/files/en-us/web/api/svgfecolormatrixelement/in1/index.md b/files/en-us/web/api/svgfecolormatrixelement/in1/index.md new file mode 100644 index 000000000000000..b830c1f1464a6a7 --- /dev/null +++ b/files/en-us/web/api/svgfecolormatrixelement/in1/index.md @@ -0,0 +1,68 @@ +--- +title: "SVGFEColorMatrixElement: in1 property" +short-title: in1 +slug: Web/API/SVGFEColorMatrixElement/in1 +page-type: web-api-instance-property +browser-compat: api.SVGFEColorMatrixElement.in1 +--- + +{{APIRef("SVG")}} + +The **`in1`** read-only property of the {{domxref("SVGFEColorMatrixElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given element. + +## Value + +An {{domxref("SVGAnimatedString")}} object. + +## Examples + +In this example, two {{SVGElement("feColorMatrix")}} elements are defined in a filter, each with a different `in` attribute. + +```html + + + + + + + + +``` + +We can access the `in` attribute: + +```js +const colorMatrices = document.querySelectorAll("feColorMatrix"); + +console.log(colorMatrices[0].in1.baseVal); // Output: "SourceGraphic" +console.log(colorMatrices[1].in1.baseVal); // Output: "BackgroundImage" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedString")}} diff --git a/files/en-us/web/api/svgfecolormatrixelement/type/index.md b/files/en-us/web/api/svgfecolormatrixelement/type/index.md new file mode 100644 index 000000000000000..b64d612612fc5bc --- /dev/null +++ b/files/en-us/web/api/svgfecolormatrixelement/type/index.md @@ -0,0 +1,58 @@ +--- +title: "SVGFEColorMatrixElement: type property" +short-title: type +slug: Web/API/SVGFEColorMatrixElement/type +page-type: web-api-instance-property +browser-compat: api.SVGFEColorMatrixElement.type +--- + +{{APIRef("SVG")}} + +The **`type`** read-only property of the {{domxref("SVGFEColorMatrixElement")}} interface reflects the {{SVGAttr("type")}} attribute of the given element. It takes one of the `SVG_FECOLORMATRIX_TYPE_*` constants defined on this interface. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}} object. + +## Examples + +### Accessing the `type` property + +```html + + + + + + + + +``` + +```js +const colorMatrices = document.querySelectorAll("feColorMatrix"); + +console.log(colorMatrices[0].type.baseVal); // Output: 1 (SVG_FECOLORMATRIX_TYPE_MATRIX) +console.log(colorMatrices[1].type.baseVal); // Output: 2 (SVG_FECOLORMATRIX_TYPE_SATURATE) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgfecolormatrixelement/values/index.md b/files/en-us/web/api/svgfecolormatrixelement/values/index.md new file mode 100644 index 000000000000000..a8d232ff63ea3bc --- /dev/null +++ b/files/en-us/web/api/svgfecolormatrixelement/values/index.md @@ -0,0 +1,50 @@ +--- +title: "SVGFEColorMatrixElement: values property" +short-title: values +slug: Web/API/SVGFEColorMatrixElement/values +page-type: web-api-instance-property +browser-compat: api.SVGFEColorMatrixElement.values +--- + +{{APIRef("SVG")}} + +The **`values`** read-only property of the {{domxref("SVGFEColorMatrixElement")}} interface reflects the {{SVGAttr("values")}} attribute of the given element. + +## Value + +An {{domxref("SVGAnimatedNumberList")}} object. + +## Examples + +### Accessing the `values` property + +```html + + + + + + +``` + +```js +const colorMatrix = document.querySelector("feColorMatrix"); + +console.dir(colorMatrix.values.baseVal); // Output: SVGAnimatedNumberList object +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}}