如何应用feBlend滤镜并保留源图像的Alpha通道

这个问题的核心在于feFlood默认生成的是完全不透明的纯色层（Alpha值为1），当你用feBlend的lighten/darken模式混合时，这个不透明的Alpha会覆盖源图像的透明区域，导致原本的Alpha通道丢失。下面给你两种简单有效的解决方法：

方法一：使用feComposite裁剪纯色层 #

通过feComposite的in操作符，我们可以用源图像的Alpha通道来裁剪纯色填充层，只保留源图像有内容的区域，这样再和源图混合时就能完整保留透明效果：

<svg>
  <filter id="filter">
    <!-- 创建蓝色纯色填充层 -->
    <feFlood result="flood" flood-color="blue" />
    <!-- 用源图的Alpha通道裁剪纯色层，仅保留源图非透明区域 -->
    <feComposite in="flood" in2="SourceGraphic" operator="in" result="masked-flood" />
    <!-- 与源图进行lighten模式混合 -->
    <feBlend in="SourceGraphic" in2="masked-flood" mode="lighten" />
  </filter>
  <image filter="url(#filter)" href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</svg>

方法二：使用feMask应用Alpha遮罩 #

我们可以把源图像的Alpha通道作为遮罩，让纯色填充层只在源图有内容的区域显示，同样能保留透明效果：

<svg>
  <filter id="filter">
    <!-- 创建基于源图Alpha的遮罩 -->
    <feMask id="source-alpha-mask">
      <feFlood flood-color="white" />
      <feComposite in2="SourceGraphic" operator="in" />
    </feMask>
    <!-- 创建蓝色纯色层并应用遮罩 -->
    <feFlood result="flood" flood-color="blue" />
    <feMaskIn mask="url(#source-alpha-mask)" result="masked-flood" />
    <!-- 与源图进行lighten模式混合 -->
    <feBlend in="SourceGraphic" in2="masked-flood" mode="lighten" />
  </filter>
  <image filter="url(#filter)" href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</svg>

两种方法的核心思路都是让纯色填充层的Alpha通道与源图像保持一致，这样在混合时就不会破坏源图的透明区域，无论是lighten还是darken模式都能正常工作。

内容的提问来源于stack exchange，提问作者Alexander Shutau