0

The gradients only functions properly when I include the svg sprite as code in the same file which defeats the purpose of having an svg sprite in the first place. I read from a different post from 3 years ago where someone said its bugged but surely there must be a fix for this?

How the sprite is formed:<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none"> <symbol id="backpack" viewBox="0 0 177.4 181.2"> <defs>(some code)</defs> (some paths) </symbol></svg>

The use of the sprite in index.html

        <svg class="nav-icon" id="nav-backpack">
        <use href="svgNew/sprites/icons-nav-elementArt.svg#backpack"></use>
    </svg>

How it renderds from external file

How it renders if I keep the svg sprite in the same document

Squaid Ink Arts
  • 11
  • 3

1 Answers1

1

I found a fix quick fix. In the SVG sprite, take all of the defs from the symbol tags and put them at the top of the SVG sprite. Then change the style of the SVG to visibility:hidden and it should work. It does however not work on google chrome due to some bug.

Squaid Ink Arts
  • 11
  • 3