カスタムsvgフィルタがFirefoxで動作しない

Question

以下のコードはchromeでうまく動作し、フィルタは適用されますが、Firefoxでは失敗します。余分なスペースは、htmlにsvg定義を直接インクルードすることで追加されます（これはすべてのブラウザにあります）。なぜこのようなことが起こっているのか分かりません。誰かが私がここにSVG

に新しいです、私は問題を知らせることができcodepenリンクです：http://codepen.io/susheel61/pen/wJYgwr

<svg version="1.1" id="ThemeSvg"> 
    <defs> 
     <g> 
      <!--/* Polygon definitions for overlay shape */--> 
      <rect id="red-poly" x="0%" y="0%" width="53%" height="100%" fill="#b5121b" transform="skewX(-10)"></rect> 
      <rect id="rect-fade-out" x="0%" y="0%" width="53%" height="100%" fill="url(#fade-out)" transform="skewX(-10)"></rect> 
     </g> 
     <g> 
      <filter id="red-angled-overlay" x="0%" y="0%" width="100%" height="100%"> 
       <!--/* Bring in the mask for fading the image out */--> 
       <feImage xlink:href="#rect-fade-out" result="red-overlay" x="0" y="0"></feImage> 
       <!--/* Create composite of image and fade mask */--> 
       <feComposite in="SourceGraphic" in2="red-overlay" operator="out" result="composite"></feComposite> 
       <!--/* Bring in the colored polygon for the overlay */--> 
       <feImage xlink:href="#red-poly" result="overlay" x="0" y="0"></feImage> 
       <!--/* Blend the overlay with the faded image */--> 
       <feBlend in="composite" in2="overlay" mode="multiply"></feBlend> 
      </filter> 
     </g> 
    </defs> 
</svg> 

<svg version="1.1" viewBox="0 0 840 474" preserveAspectRatio="xMaxYMin slice"> 
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://wowslider.com/sliders/demo-10/data/images/autumn_leaves.jpg" width="100%" height="100%" filter="url(#red-angled-overlay)" class="svg-black-overlay"></image> 
</svg> 

Answer 1

FirefoxはfeImage filters where the image is a fragmentをサポートしていません。完全なSVGドキュメントの完全なスタンドアロンイメージまたはデータURIである、feImageのみをサポートします。

それぞれのポリゴン定義で1つのスタンドアロンSVGイメージを2つ追加し、それぞれの場合に完全なイメージドキュメントにfeImage要素を指定する必要があります。