0

This is quite puzzling. I am swapping over from icon fonts in favour of svg sprites using grunt-svgstore.

The logo of the page has a gradient in it.

the full logo

All was working well until I moved on to dev the other pages of the site when the gradient in the logo disappeared.

gradient in image missing

The logo was created in Illustrator and once run through grunt-svgstore outputs the following:

<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>

I am then using this svg in the following manner:

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

Any input is appreciated.

4

0 回答 0