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 filter only working when added in style attribute (Firefox)

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

所以现在过滤器是：

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

所以一个例子是：

filter="url(about#tabShadow)"

带有Shadow的SVG无法在Firefox中的某些页面上显示

1 个答案: