I am encountering a strange behavior that I cannot explain. I utilized grunt svg sprite to generate an SVG sprite containing all of my SVG files from a specific directory.
The structure of the sprite looks like this:
<svg width="0" height="0" style="position:absolute">
<defs>
//my svgs
</defs>
</svg>
Here is a fiddle showcasing the issue: https://jsfiddle.net/swf8rtog/
The original intention was to import these SVG groups inline within the body tag to avoid an additional request for an icon font. By using
use xlink:href="#id_of_the_original_svg"I attempted to style the SVGs using CSS, applying attributes such as width, height, display: block, color, fill, etc., but nothing seemed to work.
Interestingly, when not loaded inside a "def" group, the icons appear correctly: https://jsfiddle.net/vtnLnsrh/
So, what could be causing this issue? What am I overlooking?