Question

让我们将滤镜应用于具有透明度的图像。我需要将此滤镜仅应用于不透明区域，换句话说，我想，其中alpha不为零。您可以在示例中看到当前透明区域填充泛光颜色。那可能吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: