4

这是我的简单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 应用于所有三个矩形？

4

1 回答 1

7

是的，这是可能的，但它没有应有的那么好。这里有两个选项，第一个使用 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 合成和混合。如果支持，你可以写这样的东西：

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

这是一个活生生的例子。

于 2012-07-20T14:23:26.083 回答