带有阴影的SVG在Firefox的某些页面上不显示

Question

这是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中，我只能在我的主页上显示，所有其他页面都没有。如果我删除阴影滤镜，它仍然有效。

我做了什么错误的过滤器?

Answer 1

我在这里找到了答案:SVG过滤器只有在样式属性中添加时才能工作(Firefox)

我只需要在#tabShadow前添加当前页面。

现在过滤器是:

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

所以一个例子是:

filter="url(about#tabShadow)"