<feConvolveMatrix>

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.

Phần tử primitive lọc <feConvolveMatrix> của SVG áp dụng hiệu ứng lọc chập ma trận. Một phép chập kết hợp các pixel trong ảnh đầu vào với các pixel lân cận để tạo ra ảnh kết quả. Có thể đạt được nhiều thao tác xử lý ảnh khác nhau thông qua phép chập, bao gồm làm mờ, phát hiện cạnh, làm sắc nét, tạo nổi và tạo vát cạnh.

Phép chập ma trận dựa trên một ma trận n-by-m (kernel chập) mô tả cách một giá trị pixel nhất định trong ảnh đầu vào được kết hợp với các giá trị pixel lân cận để tạo ra giá trị pixel kết quả. Mỗi pixel kết quả được xác định bằng cách áp dụng ma trận kernel lên pixel nguồn tương ứng và các pixel lân cận của nó. Công thức chập cơ bản được áp dụng cho mỗi giá trị màu của một pixel là:

\left(color\right)_{X , Y} = \frac{\sum_{i = 0}^{orderY - 1} \sum_{j = 0}^{orderX - 1} \left(source\right)_{x - targetX + j , y - \mathit{targetY} + i} \cdot \left(kernelMatrix\right)_{orderX - j - 1, orderY - i - 1}}{divisor} + bias \cdot \left(alpha\right)_{x , y}

trong đó "orderX" và "orderY" biểu thị các giá trị X và Y cho thuộc tính order, còn các biến khác tham chiếu tới các thuộc tính targetX, targetY, kernelMatrix, divisor, và bias.

Lưu ý trong các công thức trên rằng các giá trị trong kernel matrix được áp dụng sao cho kernel matrix được xoay 180 độ so với ảnh nguồn và ảnh đích để phù hợp với lý thuyết chập được mô tả trong nhiều giáo trình đồ họa máy tính.

Để minh họa, giả sử bạn có một ảnh đầu vào kích thước 5 pixel x 5 pixel, trong đó các giá trị màu cho một trong các kênh màu là như sau:

0    20  40 235 235
100 120 140 235 235
200 220 240 235 235
225 225 255 255 255
225 225 255 255 255

và bạn định nghĩa một kernel chập 3-by-3 như sau:

1 2 3
4 5 6
7 8 9

Hãy tập trung vào giá trị màu ở hàng thứ hai và cột thứ hai của ảnh (giá trị pixel nguồn là 120). Giả sử trường hợp đơn giản nhất (khi lưới pixel của ảnh đầu vào khớp hoàn hảo với lưới pixel của kernel) và giả sử các giá trị mặc định cho các thuộc tính divisor, targetX và targetY, thì giá trị màu kết quả sẽ là:

(9*0   + 8*20  + 7*40 +
 6*100 + 5*120 + 4*140 +
 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)

Giống như các primitive lọc khác, nó xử lý các thành phần màu trong color space linearRGB theo mặc định. Bạn có thể dùng color-interpolation-filters để thay bằng sRGB.

Ngữ cảnh sử dụng

Categories	Filter primitive element
Permitted content	Any number of the following elements, in any order: `<animate>`, `<set>`

Thuộc tính

in
order
kernelMatrix
divisor
bias
targetX
targetY
edgeMode
kernelUnitLength
preserveAlpha
Thuộc tính primitive lọc: x, y, width, height, result

<svg
  width="200"
  height="200"
  viewBox="0 0 200 200"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="emboss">
      <feConvolveMatrix
        kernelMatrix="3 0 0
                      0 0 0
                      0 0 -3" />
    </filter>
  </defs>

  <image
    href="mdn.svg"
    x="0"
    y="0"
    height="200"
    width="200"
    filter="url(#emboss)" />
</svg>