SVG с тенью не отображается на некоторых страницах в Firefox

Итак, вот скрипт svg (у меня он встроен вот так на странице):

<svg id="cartTab" viewBox="0 0 600 65" preserveAspectRatio="xMinYMin">
        <defs>
            <filter id="tabShadow" x="-10%" y="-10%" width="110%" height="110%">
                <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />
                <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" />
                <feComponentTransfer>
                    <feFuncA type="linear" slope="0.3"/>
                </feComponentTransfer>
                <feMerge> 
                    <feMergeNode/>
                    <feMergeNode in="SourceGraphic"/> 
                </feMerge>
            </filter>            
        </defs>
        <path fill="#658FBF" d="M4,65.7V16.4C4,9.7,9.7,4,16.4,4c0,0,234.6,0,276.8,0c136,0,113.6,61.7,272.1,61.7
        C625.1,65.7,4,65.7,4,65.7z" filter="url(#tabShadow)"/>        
        </svg>

Теперь это отображается в Chrome и IE на всех страницах просто отлично, однако в Firefox я могу отобразить это только на моей домашней странице, на всех других страницах этого просто нет. Если я удалю теневой фильтр, он сработает.

Я что-то не так делаю с фильтром?


svg html svg-filters
person nickbwatson    schedule 29.05.2015    source источник
comment
Похоже, вы используете html-атрибут <base>.   -  person Robert Longson    schedule 29.05.2015

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел ответ здесь: фильтр SVG работает только при добавлении в атрибуте стиля (Firefox)

Мне просто нужно было добавить текущую страницу перед тегом #tabShadow.

Итак, теперь фильтр:

filter="url([CURRENT URL]#tabShadow)"

Таким образом, примером может быть:

filter="url(about#tabShadow)"
person nickbwatson    schedule 29.05.2015