使用 SVG 滤镜将噪声应用于具有透明度的图像

Question

我正在尝试对图像应用噪声效果，但是，我很难保持透明度。这里有一个fiddle来说明：

#noisy {
  filter: url(#noise);
}

#filter {
  visibility: hidden;
}

<body style="background-color: #aca">
  <img src="https://i.postimg.cc/pr61qLqk/flower.png" id="noisy">
  <svg id="filter">
    <filter id="noise">
      <feTurbulence baseFrequency="0.60" xresult="colorNoise" />
      <feColorMatrix in="colorNoise" type="matrix" values=".33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0" result="monoNoise" />
      <feBlend in="SourceGraphic" in2="monoNoise" mode="multiply" />
    </filter>
  </svg>

</body>

我的目标是仅将噪声效果应用于图像中不透明的部分。（在上面的例子中：蓝色花外没有噪音。）

我使用 feComposite 和 out 运算符有点接近，但噪声继承了透明度。将 SourceAlpha 应用于结果可能会有所帮助，但我不知道如何。

感谢您的提示！

Answer 1

您正在寻找的过滤器非常简单 feComposite 和 operator="out"。

#noisy {
  filter: url(#noise);
}

#filter {
  visibility: hidden;
}

<body style="background-color: #aca">
  <img src="https://i.postimg.cc/pr61qLqk/flower.png" id="noisy">
  <svg id="filter">
    <filter id="noise">
      <feTurbulence baseFrequency="0.20" xresult="colorNoise" />
      <feColorMatrix in="colorNoise" type="matrix" values=".33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0" result="monoNoise" />
      <feComposite operator="out" in="SourceGraphic" in2="monoNoise"/>
    </filter>
  </svg>

</body>

Answer 2

只需添加一个 feComposite/in 即可将噪音剪裁到原始形状。其余保持不变。

#noisy {
  filter: url(#noise);
}

#filter {
  visibility: hidden;
}

<body style="background-color: #aca">
  <img src="https://i.postimg.cc/pr61qLqk/flower.png" id="noisy">
  <svg id="filter">
    <filter id="noise">
      <feTurbulence baseFrequency="0.60" xresult="colorNoise" />
      <feColorMatrix in="colorNoise" type="matrix" values=".33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0"/>
      <feComposite operator="in" in2="SourceGraphic" result="monoNoise"/>
      <feBlend in="SourceGraphic" in2="monoNoise" mode="multiply" />
    </filter>
  </svg>

</body>

使用 SVG 滤镜将噪声应用于具有透明度的图像

Apply noise to image with transparency by use of SVG filters

svg

transparency

alpha

image

svg-filters