自定义svg过滤器不在firefox上工作

Question

下面的代码在chrome中运行良好，应用了过滤器，但在firefox中失败。还通过在html中直接包含svg定义来添加额外的空间(这在所有浏览器中都有)。不知道为什么会这样。有人能告诉我这个问题吗?我是svg的新手。

以下是代码链接：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

火狐不支持feImage过滤图像是片段的地方。它只支持feImage，如果图像是一个完整的独立映像或完整SVG文档的数据URI。

您必须创建另外两个独立的SVG图像，一个包含每个多边形定义，并在每种情况下将feImage元素指向完整的图像文档。