feblend两个图像混合模式效果实例页面

效果：

代码：

SVG代码：

<svg
  width="150"
  height="200"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="snowEffect">
      <feImage 
        href="https://image.zhangxinxu.com/image/blog/201905/snow.jpg" 
        x="0%" y="0%"
        width="100%"
        height="100%"
        result="snowSource"
      />
      <feImage
        href="https://image.zhangxinxu.com/image/blog/201905/landscape-s.jpg"
        x="0%" y="0%"
        width="100%"
        height="100%"
        result="landscape"
      />
      <feBlend in="landscape" in2="snowSource" mode="screen" />
    </filter>
  </defs>

  <rect 
    x="0%" y="0%" width="100%" height="100%" 
    style="filter:url(#snowEffect);"
  ></rect>
</svg>

<svg
  width="150"
  height="200"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="snowEffect2">
      <feImage 
        href="https://image.zhangxinxu.com/image/blog/201905/snow.jpg" 
        width="100%"
        height="100%"
        result="snowSource2"
      />
      
      <feBlend in="SourceGraphic" in2="snowSource2" mode="screen" />
    </filter>
  </defs>

  <image
    href="https://image.zhangxinxu.com/image/blog/201905/landscape-s.jpg"
    width="100%"
    height="100%"
    style="filter: url(#snowEffect2);"
  />
</svg>