<feBlend>

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

<feBlend> SVG 濾鏡圖元根據特定的混合模式將兩個物件組合在一起。這類似於在影像編輯軟體中混合兩個圖層時已知的功能。混合模式由 mode 屬性定義。

與其它濾鏡圖元一樣,它預設在 linearRGB 顏色空間中處理顏色分量。您可以使用 color-interpolation-filters 屬性改為使用 sRGB

使用語境

分類濾鏡圖元元素
允許內容可包含任意數量、任意順序的下列元素
<animate><discard><set>

屬性

DOM 介面

此元素實現了 SVGFEBlendElement 介面。

示例

SVG

html
<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>

結果

規範

規範
濾鏡效果模組第 1 級
# feBlendElement

瀏覽器相容性

另見