如何在 svg 中为矢量形状使用混合模式？答案

【问题标题】：How to use blend mode in svg for vector shapes?如何在 svg 中为矢量形状使用混合模式？
【发布时间】：2012-07-12 00:14:03
【问题描述】：

这是我的简单 svg：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
    <filter id="f1" x="0" y="0">
      <feBlend mode="multiply" in="SourceGraphic" in2="SourceGraphic" />
    </filter>
    </defs>
    <path d='M100 100 L200 100 L200 200 L100 200 Z' fill='#00FFFF'/>
    <path d='M150 150 L250 150 L250 250 L150 250 Z' fill='#CC3300'/>
    <path d='M175 175 L275 175 L275 275 L175 275 Z' fill='#FFFF00'/>
</svg>

</body>
</html>

它只是简单的 3 个矩形形状。是否可以将混合模式 MULTIPLY 应用于所有三个矩形？

【问题讨论】：

标签： html svg vector-graphics svg-filters

【解决方案1】：

是的，这是可能的，但并不像应有的那么好。这里有两个选项，第一个使用 feImage，第二个使用 BackgroundImage 过滤器输入。如您所见，它们都有缺点。对引用 svg 内容或 BackgroundImage 过滤器输入的 feImage 的支持并不普遍，但您可以尝试在例如 Opera 或 Chrome 中查看一些结果。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
        <filter id="f1" x="0" y="0" width="1" height="1">
          <feImage xlink:href="#p1" result="p1"/>
          <feImage xlink:href="#p2" result="p2"/>
          <feImage xlink:href="#p3" result="p3"/>
          <feBlend mode="multiply" in="p1" in2="p2" />
          <feBlend mode="multiply" in2="p3" />
        </filter>

        <filter id="f2" x="0" y="0" width="1" height="1">
          <feBlend mode="multiply" in="BackgroundImage" in2="SourceGraphic" />
        </filter>

        <path id="p1" d='M100 100 L200 100 L200 200 L100 200 Z' fill='#00FFFF'/>
        <path id="p2" d='M150 150 L250 150 L250 250 L150 250 Z' fill='#CC3300'/>
        <path id="p3" d='M175 175 L275 175 L275 275 L175 275 Z' fill='#FFFF00'/>
    </defs>
    <rect width="100%" height="100%" filter="url(#f1)"/>

    <g transform="translate(300 0)">
        <g enable-background="new">
            <g enable-background="new">
                <path d='M100 100 L200 100 L200 200 L100 200 Z' fill='#00FFFF'/>
                <path d='M150 150 L250 150 L250 250 L150 250 Z' fill='#CC3300' filter="url(#f2)"/>
            </g>
            <path d='M175 175 L275 175 L275 275 L175 275 Z' fill='#FFFF00' filter="url(#f2)"/>
        </g>
    </g>
</svg>

希望我们很快就能在所有浏览器中支持CSS Compositing and Blending。如果支持，你可以写这样的东西：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <style>
       path { mix-blend-mode: multiply; }
    </style>
    <path d='M100 100 L200 100 L200 200 L100 200 Z' fill='#00FFFF'/>
    <path d='M150 150 L250 150 L250 250 L150 250 Z' fill='#CC3300'/>
    <path d='M175 175 L275 175 L275 275 L175 275 Z' fill='#FFFF00'/>
</svg>

这是example的直播。

【讨论】：

thnks，在 chrome 中试过了，只有两个第一个形状是混合模式而不是第三个黄色。
@DanV 使用 mix-blend-mode 的更新示例在最新版本的 Opera、Chrome 和 Firefox 中运行良好。
@ErikDahlström 这在我最新的 FF 35.0.1 中不起作用，在没有 web 实验标志的最新 Chrome 40.0.2214.111 中也不起作用。
Chrome 41 / Opera 28 及更高版本默认启用它，请参阅chromestatus.com/feature/6362616360337408。 Firefox 32 及更高版本应默认启用它，请参阅developer.mozilla.org/en-US/Firefox/Releases/32。
当我在 FF 中添加它时，我的元素会变黑 :( 我期待 Chrome 41 何时成为稳定版本，并且在最新的浏览器中始终如一地工作！