New Pages: SVGFEColorMatrixElement (#37419)

mdn · Jan 4, 2025 · b5f56e7 · b5f56e7
1 parent 44ae1cf
commit b5f56e7
Show file tree

Hide file tree

Showing 3 changed files with 176 additions and 0 deletions.
diff --git a/files/en-us/web/api/svgfecolormatrixelement/in1/index.md 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
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <filter id="color-matrix-filter">
+    <feColorMatrix
+      in="SourceGraphic"
+      type="matrix"
+      values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" />
+    <feColorMatrix
+      in="BackgroundImage"
+      type="matrix"
+      values="0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0 0 0 0 1 0" />
+  </filter>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:red;"
+    filter="url(#color-matrix-filter)" />
+  <circle
+    cx="100"
+    cy="100"
+    r="50"
+    style="fill:blue;"
+    filter="url(#color-matrix-filter)" />
+</svg>
+```
+
+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
@@ -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
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <filter id="color-matrix-filter">
+    <feColorMatrix
+      type="matrix"
+      values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" />
+    <feColorMatrix type="saturate" values="0.5" />
+  </filter>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:red;"
+    filter="url(#color-matrix-filter)" />
+  <circle
+    cx="100"
+    cy="100"
+    r="50"
+    style="fill:blue;"
+    filter="url(#color-matrix-filter)" />
+</svg>
+```
+
+```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
@@ -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
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <filter id="color-matrix-filter">
+    <feColorMatrix
+      type="matrix"
+      values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" />
+  </filter>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:red;"
+    filter="url(#color-matrix-filter)" />
+</svg>
+```
+
+```js
+const colorMatrix = document.querySelector("feColorMatrix");
+
+console.dir(colorMatrix.values.baseVal); // Output: SVGAnimatedNumberList object
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}