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.

Thuộc tính kernelMatrix định nghĩa danh sách các số tạo thành kernel matrix cho phần tử <feConvolveMatrix>.

Các giá trị được phân tách bằng khoảng trắng và/hoặc dấu phẩy. Số lượng mục trong danh sách phải bằng <orderX> nhân với <orderY> như được định nghĩa trong thuộc tính order.

Bạn có thể dùng thuộc tính này với phần tử SVG sau:

Ví dụ

html
<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"
    filter="url(#convolveMatrix1)" />
  <image
    x="220"
    href="mdn_logo_only_color.png"
    width="200"
    height="200"
    filter="url(#convolveMatrix2)" />
</svg>

Ghi chú sử dụng

Giá trị <list of numbers>
Giá trị mặc định Không có
Có thể animate
<list of numbers>

Danh sách các <number> tạo thành kernel matrix cho phép tích chập. Các giá trị được phân tách bằng khoảng trắng và/hoặc dấu phẩy. Số lượng mục trong danh sách phải bằng <orderX> nhân với <orderY>.

Nếu kết quả của orderX * orderY không bằng số lượng mục trong danh sách giá trị, primitive bộ lọc sẽ hoạt động như một bộ lọc truyền qua.

Đặc tả

Specification
Filter Effects Module Level 1
# element-attrdef-feconvolvematrix-kernelmatrix

Tương thích trình duyệt