SVG 过滤器仅将过滤器应用于不透明区域答案

【问题标题】：SVG filter apply filter only to opaque regionSVG 过滤器仅将过滤器应用于不透明区域
【发布时间】：2017-10-16 03:51:28
【问题描述】：

让过滤器应用于具有透明度的图像。我需要将此过滤器仅应用于不透明区域，换句话说，我猜，alpha 是非零的。您可以在示例中看到当前透明区域填充有泛色。这可能吗？

svg {
  width: 0;
  height: 0;
}
.myFilter {
  filter: url(#myFilter);
}

<svg>
  <defs>
    <filter id="myFilter" x="0" y="0" width="100%" height="100%"
            color-interpolation-filters="sRGB">
      <feFlood flood-color="#3a0339" result="flood"/>
      <feBlend mode="exclusion" in="flood" in2="SourceGraphic"/>
    </filter>
  </defs>
</svg>

<img class="myFilter" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png">

【问题讨论】：

feBlend 不支持“排除” - 仅支持正常、乘法、加网、变亮和变暗。（你也可以通过更多的工作来模仿强光和柔光）
@MichaelMullany 确实如此，您可以自己运行示例。请检查此stackoverflow.com/questions/43991821/…
是的——这对我来说是个新闻！很高兴看到更多过滤器 1.0 规范进入浏览器:)

标签： css svg filter svg-filters

【解决方案1】：

您可以使用feComposite 节点将源图形的 Alpha 通道应用于flood 过滤器的输出：

svg {
  width: 0;
  height: 0;
}
.myFilter {
  filter: url(#myFilter);
}

<svg>
  <defs>
    <filter id="myFilter" x="0" y="0" width="100%" height="100%"
            color-interpolation-filters="sRGB">
      <feFlood flood-color="#3a0339" result="flood"/>
      <feComposite in="flood" in2="SourceAlpha" operator="in" result="flood_alpha"/>
      <feBlend mode="exclusion" in="flood_alpha" in2="SourceGraphic"/>
    </filter>
  </defs>
</svg>

<img class="myFilter" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png">

【讨论】：

我还认为您的意思是“feComposite”节点而不是 feBlend 节点，因为这就是您编写的代码中的内容 - 编辑了答案以反映这一点。在 SVG 1.1 - feBlend 不支持“排除” - 只有正常、乘法、加网、变亮和变暗。其他模式正在添加为 Web Filters 1.0 规范的一部分。但它还不是跨浏览器。
@MichaelMullany 对不起，是的。我的错。