SVG中的混合模式实际上工作吗？

Question

我已经多次做了以下内容：

<defs> 
<filter id="screen"> 
<feBlend mode="screen" in2="BackgroundImage"/> 
</filter> 
</defs> 

但是，当我，一个形状内，写上“过滤器=” URL（#screen）”，我的形状消失 我已经试过了每浏览器（Safari浏览器，Chrome浏览器，火狐，FfxNightly）。我在做什么错？

这将有助于如果有人能够给我一个例子，他们知道作品

感谢

Answer 1

您应该尝试Opera并查看其差异。看来，Opera是目前唯一正确实现这一点的浏览器。该specs for <feBlend>举个例子：

<?xml version="1.0"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="5cm" height="5cm" viewBox="0 0 500 500" 
    xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <title>Example feBlend - Examples of feBlend modes</title> 
    <desc>Five text strings blended into a gradient, 
     with one text string for each of the five feBlend modes.</desc> 
    <defs> 
    <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse" 
      x1="100" y1="0" x2="300" y2="0"> 
     <stop offset="0" stop-color="#000000" /> 
     <stop offset=".33" stop-color="#ffffff" /> 
     <stop offset=".67" stop-color="#ff0000" /> 
     <stop offset="1" stop-color="#808080" /> 
    </linearGradient> 
    <filter id="Normal"> 
     <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/> 
    </filter> 
    <filter id="Multiply"> 
     <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/> 
    </filter> 
    <filter id="Screen"> 
     <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/> 
    </filter> 
    <filter id="Darken"> 
     <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/> 
    </filter> 
    <filter id="Lighten"> 
     <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/> 
    </filter> 
    </defs> 
    <rect fill="none" stroke="blue" 
     x="1" y="1" width="498" height="498"/> 
    <g enable-background="new" > 
    <rect x="100" y="20" width="300" height="460" fill="url(#MyGradient)" /> 
    <g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6" > 
     <text x="50" y="90" filter="url(#Normal)" >Normal</text> 
     <text x="50" y="180" filter="url(#Multiply)" >Multiply</text> 
     <text x="50" y="270" filter="url(#Screen)" >Screen</text> 
     <text x="50" y="360" filter="url(#Darken)" >Darken</text> 
     <text x="50" y="450" filter="url(#Lighten)" >Lighten</text> 
    </g> 
    </g> 
</svg> 

这个例子应该是这样的，如果正确呈现：

实际上，它看起来像这样在您的浏览器：

在我的Opera中，它看起来像这样：

即，不完全完美，存在mode="lighten"的问题。