SVG过滤器模拟混合模式

时间:2017-05-16 03:04:53

标签: css svg filter svg-filters

我尝试仅使用SVG过滤器模拟mix-blend-mode:exclusion混合模式。文档说排除是较浅颜色的较暗颜色的减法,换句话说,较大的颜色分量值减去较小的颜色分量值。 有没有办法使用SVG过滤器模拟这个逻辑? 原始图片是:

enter image description here

过滤后的图片为:

enter image description here

要排除的颜色为#3a0339

为方便起见,我带了一些代码段:



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

<svg>
<defs>
<filter id="myFilter" x="0" y="0" width="100%" height="100%">
  <feFlood result="fill" flood-color="#3a0339" flood-opacity="1">
  </feFlood>
<feComposite operator="arithmetic" in="SourceGraphic" in2="fill" k1="0" k2="0.5" k3="0.5" k4="0"/>
 </filter>
</defs>
</svg>
<img class="myFilter" src="https://i.stack.imgur.com/ux2FT.png">
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

Filter Effects module更新了<feBlend>的定义。除了SVG 1.1规范中定义的mode值之外,您现在可以使用Compositing and Blending specification定义的所有额外模式。

这包括“排除”,因此只要您处于浏览器环境中,您就可以非常轻松地执行您想要的操作。以下适用于Firefox和Chrome。我还没有检查过任何其他浏览器。

svg {
  width: 0;
  height: 0;
}
.myFilter {
  filter: url(#myFilter);
}
.myFilter2 {
  mix-blend-mode: exclusion;
}
.mix-bg {
  background-color: #3a0339;
  display: inline-block;
}
.mix-bg IMG {
  display: block;
}
<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://i.stack.imgur.com/ux2FT.png">

<div class="mix-bg">
  <img class="myFilter2" src="https://i.stack.imgur.com/ux2FT.png">
</div>