1. Web
  2. SVG
  3. Tham chiếu
  4. Phần tử
  5. <feComposite>

<feComposite>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

Phần tử primitive lọc <feComposite> của SVG thực hiện việc kết hợp hai ảnh đầu vào theo từng pixel trong không gian ảnh bằng một trong các phép tổng hợp Porter-Duff: over, in, atop, out, xor, lighter, hoặc arithmetic.

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.

Bảng dưới đây cho thấy từng phép toán này bằng cách dùng một hình ảnh logo MDN được tổng hợp với một hình tròn đỏ:

Phép toán Mô tả

over over operator

 Đồ họa nguồn được định nghĩa bởi thuộc tính in (logo MDN) được đặt lên trên đồ họa đích được định nghĩa bởi thuộc tính in2 (hình tròn).

Đây là phép toán mặc định, sẽ được dùng nếu không có phép toán nào được chỉ định hoặc nếu phép toán được chỉ định không được hỗ trợ.

in in operator

 Những phần của đồ họa nguồn được định nghĩa bởi thuộc tính in chồng lên đồ họa đích được định nghĩa trong thuộc tính in2 sẽ thay thế đồ họa đích.

out out operator

 Những phần của đồ họa nguồn được định nghĩa bởi thuộc tính in nằm ngoài đồ họa đích được định nghĩa trong thuộc tính in2 sẽ được hiển thị.

atop atop operator

 Những phần của đồ họa nguồn được định nghĩa trong thuộc tính in chồng lên đồ họa đích được định nghĩa trong thuộc tính in2 sẽ thay thế đồ họa đích. Những phần của đồ họa đích không chồng lấn với đồ họa nguồn sẽ được giữ nguyên.

xor xor operator

 Các vùng không chồng lấn của đồ họa nguồn được định nghĩa trong thuộc tính in và đồ họa đích được định nghĩa trong thuộc tính in2 sẽ được kết hợp.

lighter lighter operator

Tổng của đồ họa nguồn được định nghĩa trong thuộc tính in và đồ họa đích được định nghĩa trong thuộc tính in2 sẽ được hiển thị.

arithmetic arithmetic operator

Phép toán arithmetic hữu ích khi kết hợp đầu ra từ các bộ lọc <feDiffuseLighting> và <feSpecularLighting> với dữ liệu texture. Nếu chọn phép toán arithmetic, mỗi pixel kết quả được tính bằng công thức sau: 

result = k1*i1*i2 + k2*i1 + k3*i2 + k4

trong đó:

  • i1 và i2 biểu thị các giá trị kênh pixel tương ứng của ảnh đầu vào, ánh xạ tới in và in2 tương ứng
  • k1, k2, k3, và k4 biểu thị các giá trị của các thuộc tính cùng tên.

Ngữ cảnh sử dụng

CategoriesFilter primitive element
Permitted contentAny number of the following elements, in any order:
<animate>, <set>

Thuộc tính

  • in: Đầu vào thứ nhất cho primitive lọc đã cho.
  • in2: Đầu vào thứ hai cho primitive lọc đã cho (hoạt động giống thuộc tính in).
  • operator: over | in | out | atop | xor | lighter | arithmetic
  • k1, k2, k3, k4: Các giá trị dùng để tính pixel kết quả trong primitive lọc operator là arithmetic.
  • Thuộc tính primitive lọc: x, y, width, height, result

Giao diện DOM

Phần tử này triển khai giao diện SVGFECompositeElement.

Ví dụ

Ví dụ này định nghĩa các bộ lọc cho từng phép toán được hỗ trợ (over, atop, lighter, v.v.), tổng hợp một SourceGraphic đầu vào với một hình ảnh logo MDN. Mỗi bộ lọc được áp dụng cho một phần tử hình tròn, rồi phần tử đó được dùng làm SourceGraphic.

Note: BackgroundImage không thể được dùng làm nguồn tổng hợp trên các trình duyệt hiện đại, vì vậy chúng ta không thể định nghĩa một bộ lọc tổng hợp bằng cách dùng các pixel đang nằm bên dưới bộ lọc như một trong các nguồn. Cách tiếp cận được dùng ở đây là một giải pháp thay thế vì chúng ta không thể dùng BackgroundImage.

SVG

html
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="imageOver">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="over" />
    </filter>
    <filter id="imageIn">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="in" />
    </filter>
    <filter id="imageOut">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="out" />
    </filter>
    <filter id="imageAtop">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="atop" />
    </filter>
    <filter id="imageXor">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="xor" />
    </filter>
    <filter id="imageArithmetic">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite
        in2="SourceGraphic"
        operator="arithmetic"
        k1="0.1"
        k2="0.2"
        k3="0.3"
        k4="0.4" />
    </filter>
    <filter id="imageLighter">
      <feImage href="mdn_logo_only_color.png" x="10px" y="10px" width="160px" />
      <feComposite in2="SourceGraphic" operator="lighter" />
    </filter>
  </defs>
  <g transform="translate(0,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageOver)" />
    <text x="80" y="-5">over</text>
  </g>
  <g transform="translate(200,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageIn)" />
    <text x="80" y="-5">in</text>
  </g>
  <g transform="translate(400,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageOut)" />
    <text x="80" y="-5">out</text>
  </g>
  <g transform="translate(600,25)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageAtop)" />
    <text x="80" y="-5">atop</text>
  </g>
  <g transform="translate(0,240)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageXor)" />
    <text x="80" y="-5">xor</text>
  </g>
  <g transform="translate(200,240)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageArithmetic)" />
    <text x="70" y="-5">arithmetic</text>
  </g>
  <g transform="translate(400,240)">
    <circle
      cx="90px"
      cy="80px"
      r="70px"
      fill="#cc0000"
      filter="url(#imageLighter)" />
    <text x="80" y="-5">lighter</text>
  </g>
</svg>

Kết quả

Đặc tả

Specification
Filter Effects Module Level 1
# feCompositeElement

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

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content