Question

我尝试通过将feFlood和feBlend应用到＆＃34;照亮＆＃34;来修改图像的颜色。并且＆＃34;变暗＆＃34;模式。如何保留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

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

您需要做的是首先使用源图像中的alpha屏蔽洪水（＆＃34; SourceAlpha＆＃34;），然后将屏蔽的洪水与原始图像混合。

＆＃13;

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

＆＃13;

Answer 2

我认为保罗的答案很接近但不完全正确。

feBlend公式是：

Opacity of Final Pixel  = 1 - (1- Opacity of Image A Pixel)*(1- Opacity of Image B Pixel)

如果先进行蒙版然后再进行混合，最终的不透明度会有点偏差。例如，对于图像A中0.6不透明度的像素，最终会得到最终像素不透明度= 1 - （.6 * .6）=。64

接近但与0.6不一样。

如果要在最终图像中保留图像A的精确不透明度 - 您需要先进行混合，然后再进行遮蔽。这是假设您希望在预乘的“100％不透明等效”颜色上完成减轻，通常就是这种情况。

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

如何应用feBlend并保留源alpha

2 个答案: