SVG渐变不适用于家庭以外的页面

Question

这非常令人费解。我正在使用svg sprites替换图标字体以支持grunt-svgstore。

页面的徽标中有一个渐变。

所有工作都很顺利，直到徽标中的渐变消失后，我开始展开网站的其他页面。

徽标是在Illustrator中创建的，一旦通过grunt-svgstore输出，则输出以下内容：

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="logo-gradient" gradientUnits="userSpaceOnUse" x1="-263.1675" y1="145.0012" x2="-263.1675" y2="239.8049" gradientTransform="matrix(1 0 0 -1 304 239.8052)">
            <stop offset="0" style="stop-color:#223A9A" />
            <stop offset="1" style="stop-color:#2196F3" />
        </linearGradient>
    </defs>
    <symbol viewBox="0 0 418.042 94.805" id="svg-logo">
        <title>logo</title>
        <g id="logo-symbol">
            <path fill="url(#logo-gradient)" d="M81.347,0.523c-0. ..." />
        </g>
        <g id="logo-text">
            <g>
                <path fill="#FFFFFF" d="M113.23,42.32l2.185-13.941H79. ..." />
            </g>
        </g>
    </symbol>
</svg>

然后我以下列方式使用此svg：

<a href="/" class="logo"><svg><use xlink:href="#svg-logo"></use></svg></a>

赞赏任何意见。