Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Pages: SVGFEConvolveMatrixElement props #37424

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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,27 @@
---
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. It takes one of the `SVG_EDGEMODE_*` constants defined on this interface.

## Value

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

## 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")}}
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
title: "SVGFEConvolveMatrixElement: preserveAlpha property"
short-title: preserveAlpha
slug: Web/API/SVGFEConvolveMatrixElement/preserveAlpha
page-type: web-api-instance-property
browser-compat: api.SVGFEConvolveMatrixElement.preserveAlpha
---

{{APIRef("SVG")}}

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

## Value

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

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

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