пользовательский фильтр svg не работает в Firefox

Этот приведенный ниже код отлично работает в Chrome, и фильтр применяется, но не работает в Firefox. Дополнительное пространство также добавляется путем прямого включения определения svg в html (это присутствует во всех браузерах). Не уверен, почему это происходит так. Может кто-нибудь сообщить мне о проблеме, я новичок в 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>

javascript svg html firefox svg-filters
person Susheel Singh    schedule 28.03.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Firefox не поддерживает фильтры feImage, где изображение является фрагментом. Он поддерживает только feImage, где изображение является полным автономным изображением или URI данных полного документа SVG.

Вам нужно будет создать два дополнительных автономных изображения SVG, по одному с каждым определением полигона, и указать элементы feImage на полный документ изображения в каждом случае.

person Robert Longson    schedule 28.03.2017
comment
@MichaelMullany Я упомянул этот вариант в ответе. - person Robert Longson; 29.03.2017
comment
Можете ли вы добавить пример? Я не понимаю, о чем вы говорите, поскольку я новичок в SVG. - person Susheel Singh; 29.03.2017
comment
Создайте полный документ svg, вставьте в него прямоугольник. Направьте фильтр на документ, а не на прямоугольник. - person Robert Longson; 29.03.2017
comment
Что делать, если у меня есть несколько прямоугольников в одном файле, и я хочу сослаться на один из прямоугольников? - person Susheel Singh; 29.03.2017
comment
Firefox не поддерживает это, вам понадобится несколько файлов. - person Robert Longson; 29.03.2017