2012-07-12 67 views
0

这里是我的简单的SVG:如何在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应用于所有三个矩形?

回答

5

是的,这是可能的,但它不是它应该的。这里有两个选项,第一个使用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

+0

thnks,尝试在铬中,只有两个第一形状与混合模式不是第三个黄色。 – fjckls 2012-07-23 09:09:44

+0

这不适用于Firefox或者 – DanV 2015-02-17 10:20:11

+1

@DanV使用混合混合模式的更新示例在Opera,Chrome和Firefox的最新版本中工作得很好。 – 2015-02-17 12:35:03