<feBlend>

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 <feBlend> của SVG kết hợp hai đối tượng với nhau theo một chế độ hòa trộn nhất định. Điều này tương tự với cách thường thấy trong phần mềm chỉnh sửa ảnh khi hòa trộn hai lớp. Chế độ được định nghĩa bởi thuộc tính mode.

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
in2
mode
Thuộc tính primitive lọc: x, y, width, height, result

<svg
  width="200"
  height="200"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="spotlight">
      <feFlood
        result="floodFill"
        x="0"
        y="0"
        width="100%"
        height="100%"
        flood-color="green"
        flood-opacity="1" />
      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply" />
    </filter>
  </defs>

  <image
    href="mdn_logo_only_color.png"
    x="10%"
    y="10%"
    width="80%"
    height="80%"
    filter="url(#spotlight)" />
</svg>