svg - 如何应用 feBlend 并保留源 Alpha

Question

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

<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 的工作方式是从两个输入的每个 channel 中获取最大颜色值(预先乘以 alpha)。因此，如果像素的不透明度为零，则它永远不会算作任何 channel 的最大颜色，并且将使用其他输入的值。

您需要做的是首先使用源图像(“SourceAlpha”)中的 Alpha mask 泛光，然后将 mask 的泛光与原始图像混合。

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