Skip to content
60 changes: 60 additions & 0 deletions files/en-us/web/api/svgfeconvolvematrixelement/bias/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
---
title: "SVGFEConvolveMatrixElement: bias property"
short-title: bias
slug: Web/API/SVGFEConvolveMatrixElement/bias
page-type: web-api-instance-property
browser-compat: api.SVGFEConvolveMatrixElement.bias
---

{{APIRef("SVG")}}

The **`bias`** read-only property of the {{domxref("SVGFEConvolveMatrixElement")}} interface reflects the {{SVGAttr("bias")}} attribute of the given {{SVGElement("feConvolveMatrix")}} element.

## Value

An {{domxref("SVGAnimatedNumber")}} object.

## Examples

### Access the `bias` property

The `bias` property is used to adjust the brightness of the output.

```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="convolveFilterWithBias">
<feConvolveMatrix
in="SourceGraphic"
order="3"
kernelMatrix="0 -1 0 -1 5 -1 0 -1 0"
bias="0.25" />
</filter>
</defs>
<rect
x="20"
y="20"
width="100"
height="100"
style="fill:lightblue;"
filter="url(#convolveFilterWithBias)" />
</svg>
```

```js
const convolveMatrix = document.querySelector("feConvolveMatrix");

console.log(convolveMatrix.bias.baseVal); // Output: 0.25
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{domxref("SVGAnimatedNumber")}}
60 changes: 60 additions & 0 deletions files/en-us/web/api/svgfeconvolvematrixelement/divisor/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
---
title: "SVGFEConvolveMatrixElement: divisor property"
short-title: divisor
slug: Web/API/SVGFEConvolveMatrixElement/divisor
page-type: web-api-instance-property
browser-compat: api.SVGFEConvolveMatrixElement.divisor
---

{{APIRef("SVG")}}

The **`divisor`** read-only property of the {{domxref("SVGFEConvolveMatrixElement")}} interface reflects the {{SVGAttr("divisor")}} attribute of the given {{SVGElement("feConvolveMatrix")}} element.

## Value

An {{domxref("SVGAnimatedNumber")}} object.

## Examples

### Access the `divisor` property

A convolution filter is applied to a rectangle, and the `divisor` is used to control the brightness.

```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="convolveFilterWithDivisor">
<feConvolveMatrix
in="SourceGraphic"
order="3"
kernelMatrix="0 -1 0 -1 4 -1 0 -1 0"
divisor="1" />
</filter>
</defs>
<rect
x="20"
y="20"
width="100"
height="100"
style="fill:lightgreen;"
filter="url(#convolveFilterWithDivisor)" />
</svg>
```

```js
const convolveMatrix = document.querySelector("feConvolveMatrix");

console.log(convolveMatrix.divisor.baseVal); // Output: 1
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{domxref("SVGAnimatedNumber")}}
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
---
title: "SVGFEConvolveMatrixElement: edgeMode property"
short-title: edgeMode
slug: Web/API/SVGFEConvolveMatrixElement/edgeMode
page-type: web-api-instance-property
browser-compat: api.SVGFEConvolveMatrixElement.edgeMode
---

{{APIRef("SVG")}}

The **`edgeMode`** read-only property of the {{domxref("SVGFEConvolveMatrixElement")}} interface reflects the {{SVGAttr("edgeMode")}} attribute of the given {{SVGElement("feConvolveMatrix")}} element. The `SVG_EDGEMODE_*` constants defined on this interface are represented by the numbers 1 through 3, where the default `duplicate` is `1`, `wrap` is `2`, and `none` is `3`.

## Value

An {{domxref("SVGAnimatedEnumeration")}} object.

## Examples

In this example, we retrieve the `<feConvolveMatrix>` filter element's `edgeMode` attribute value using the `edgeMode` property of the `SVGFEConvolveMatrixElement` interface.

If our SVG contains the following filter:

```html
<feConvolveMatrix kernelMatrix="3 0 0 0 0 0 0 0 -4" id="el" edgeMode="wrap" />
```

We can access the number associated with the enumerated keyword value of the `edgeMode` attribute of the `feConvolveMatrix` element.

```js
const el = document.getElementById("el");
console.log(el.edgeMode.baseVal); // output: 2
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{domxref("SVGAnimatedEnumeration")}}
59 changes: 59 additions & 0 deletions files/en-us/web/api/svgfeconvolvematrixelement/in1/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
---
title: "SVGFEConvolveMatrixElement: in1 property"
short-title: in1
slug: Web/API/SVGFEConvolveMatrixElement/in1
page-type: web-api-instance-property
browser-compat: api.SVGFEConvolveMatrixElement.in1
---

{{APIRef("SVG")}}

The **`in1`** read-only property of the {{domxref("SVGFEConvolveMatrixElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feConvolveMatrix")}} element.

## Value

An {{domxref("SVGAnimatedString")}} object.

## Examples

In this example, the `<feConvolveMatrix>` element applies a convolution filter to an input graphic specified by the `in` attribute.

```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="convolveFilter">
<feConvolveMatrix
in="SourceGraphic"
order="3"
kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" />
</filter>
</defs>
<rect
x="20"
y="20"
width="100"
height="100"
style="fill:lightblue;"
filter="url(#convolveFilter)" />
</svg>
```

We can access the `in` attribute of the `<feConvolveMatrix>` element.

```js
const convolveMatrix = document.querySelector("feConvolveMatrix");

console.log(convolveMatrix.in1.baseVal); // Output: "SourceGraphic"
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{domxref("SVGAnimatedString")}}
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
title: "SVGFEConvolveMatrixElement: kernelMatrix property"
short-title: kernelMatrix
slug: Web/API/SVGFEConvolveMatrixElement/kernelMatrix
page-type: web-api-instance-property
browser-compat: api.SVGFEConvolveMatrixElement.kernelMatrix
---

{{APIRef("SVG")}}

The **`kernelMatrix`** read-only property of the {{domxref("SVGFEConvolveMatrixElement")}} interface reflects the {{SVGAttr("kernelMatrix")}} attribute of the given {{SVGElement("feConvolveMatrix")}} element.

## Value

An {{domxref("SVGAnimatedNumberList")}} object.

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{domxref("SVGAnimatedNumberList")}}
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
title: "SVGFEConvolveMatrixElement: kernelUnitLengthX property"
short-title: kernelUnitLengthX
slug: Web/API/SVGFEConvolveMatrixElement/kernelUnitLengthX
page-type: web-api-instance-property
browser-compat: api.SVGFEConvolveMatrixElement.kernelUnitLengthX
---

{{APIRef("SVG")}}

The **`kernelUnitLengthX`** read-only property of the {{domxref("SVGFEConvolveMatrixElement")}} interface reflects the {{SVGAttr("kernelUnitLength")}} attribute of the given {{SVGElement("feConvolveMatrix")}} element.

It specifies the length in user units for each cell of the convolution matrix along the X-axis.

## Value

An {{domxref("SVGAnimatedNumber")}} object.

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{domxref("SVGAnimatedNumber")}}
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
title: "SVGFEConvolveMatrixElement: kernelUnitLengthY property"
short-title: kernelUnitLengthY
slug: Web/API/SVGFEConvolveMatrixElement/kernelUnitLengthY
page-type: web-api-instance-property
browser-compat: api.SVGFEConvolveMatrixElement.kernelUnitLengthY
---

{{APIRef("SVG")}}

The **`kernelUnitLengthY`** read-only property of the {{domxref("SVGFEConvolveMatrixElement")}} interface reflects the {{SVGAttr("kernelUnitLength")}} attribute of the given {{SVGElement("feConvolveMatrix")}} element.

It specifies the length in user units for each cell of the convolution matrix along the Y-axis.

## Value

An {{domxref("SVGAnimatedNumber")}} object.

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{domxref("SVGAnimatedNumber")}}
29 changes: 29 additions & 0 deletions files/en-us/web/api/svgfeconvolvematrixelement/orderx/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
title: "SVGFEConvolveMatrixElement: orderX property"
short-title: orderX
slug: Web/API/SVGFEConvolveMatrixElement/orderX
page-type: web-api-instance-property
browser-compat: api.SVGFEConvolveMatrixElement.orderX
---

{{APIRef("SVG")}}

The **`orderX`** read-only property of the {{domxref("SVGFEConvolveMatrixElement")}} interface reflects the {{SVGAttr("order")}} attribute of the given {{SVGElement("feConvolveMatrix")}} element.

It specifies how many cells (or elements) are present in each row of the kernel matrix along the X-axis.

## Value

An {{domxref("SVGAnimatedInteger")}} object.

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{domxref("SVGAnimatedInteger")}}
29 changes: 29 additions & 0 deletions files/en-us/web/api/svgfeconvolvematrixelement/ordery/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
title: "SVGFEConvolveMatrixElement: orderY property"
short-title: orderY
slug: Web/API/SVGFEConvolveMatrixElement/orderY
page-type: web-api-instance-property
browser-compat: api.SVGFEConvolveMatrixElement.orderY
---

{{APIRef("SVG")}}

The **`orderY`** read-only property of the {{domxref("SVGFEConvolveMatrixElement")}} interface reflects the {{SVGAttr("order")}} attribute of the given {{SVGElement("feConvolveMatrix")}} element.

It specifies how many cells (or elements) are present in each row of the kernel matrix along the Y-axis.

## Value

An {{domxref("SVGAnimatedInteger")}} object.

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{domxref("SVGAnimatedInteger")}}
Loading
Loading