Question

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

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

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

1 个答案: