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"的問題。