kernelMatrix
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The kernelMatrix
attribute defines the list of numbers that make up the kernel matrix for the <feConvolveMatrix>
element.
Values are separated by space characters and/or a comma. The number of entries in the list must equal to <orderX>
by <orderY>
as defined in the order
attribute.
You can use this attribute with the following SVG elements:
Example
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
<filter id="convolveMatrix1" x="0" y="0" width="100%" height="100%">
<feConvolveMatrix kernelMatrix="1 1 0 0 0 0 0 0 -1" />
</filter>
<filter id="convolveMatrix2" x="0" y="0" width="100%" height="100%">
<feConvolveMatrix kernelMatrix="-1 0 0 0 0 0 0 0 1" />
</filter>
<image
href="mdn_logo_only_color.png"
width="200"
height="200"
style="filter:url(#convolveMatrix1);" />
<image
href="mdn_logo_only_color.png"
width="200"
height="200"
style="filter:url(#convolveMatrix2); transform:translateX(220px);" />
</svg>
Usage notes
Value | <list of numbers> |
---|---|
Default value | None |
Animatable | Yes |
<list of numbers>
-
The list of
<number>
s that make up the kernel matrix for the convolution. Values are separated by space characters and/or a comma. The number of entries in the list must equal<orderX>
times<orderY>
.If the result of
orderX
*orderY
is not equal to the number of entries in the value list, the filter primitive acts as a pass through filter.
Specifications
Specification |
---|
Filter Effects Module Level 1 # element-attrdef-feconvolvematrix-kernelmatrix |
Browser compatibility
BCD tables only load in the browser