如何应用 feBlend 并保留源 Alpha

Question

我试图通过在“变亮”和“变暗”模式下应用 feFlood 和 feBlend 来修改图像的颜色。如何保留 Alpha 通道？

<svg>
  <filter id="filter">
    <feFlood result="flood" flood-color="blue" />
    <feBlend in="SourceGraphic" in2="flood" mode="lighten" />
  </filter>
  <image filter="url(#filter)" href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</svg>

https://jsfiddle.net/utqghr0o/

Answer 1

lighten 的工作方式是从两个输入的每个通道中获取最大颜色值（预先乘以 alpha）。因此，如果像素的不透明度为零，则它将永远不会被视为任何通道的最大颜色，并且将使用来自其他输入的值。

您需要做的是首先使用源图像（“SourceAlpha”）中的 Alpha 遮罩洪水，然后将遮罩的洪水与原始图像混合。

<svg width="544" height="184">
  <filter id="filter">
    <feFlood result="flood" flood-color="blue" />
    <feComposite in="flood" in2="SourceAlpha" operator="atop" result="maskedflood"/>
    <feBlend in="SourceGraphic" in2="maskedflood" mode="lighten" />
  </filter>
  <image filter="url(#filter)" width="544" height="184" href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</svg>