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。它仅支持feImage，其中图像是完整的独立图像或完整SVG文档的数据URI。

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

自定义svg过滤器无法在Firefox上运行

1 个答案: