CODEWITHSUNDEEP
htmlcsssvgsprite
Astunda
Astunda

Reputation: 13

SVG use element not showing paths

I am trying to use SVG sprite technique to display single SVGS when I need them, and calling them via the 'use' element. I know this is slightly tricky because of the shadow DOM, but I can't figure out why my elements are not showing properly.

In my local dev build, which is different than this JSfiddle, the use element actually shows the SVG and the paths, but only as invisible shapes. No fill, or anything. Just invisible paths. I have it structured like this:

<nav class="nav-right">
    <div class="nav-right-left">
        <svg class="icon">
           <use class="icon-menu" xlink:href="#icon-menu"></use>
        </svg>
    </div>
</nav>

The svg class 'icon' shows in the proper place but the use element shows outside of the div and down the page. Could this be because of user agent stylesheet having svg:not(:root) {overflow: hidden;}?

Can anyone look at the JSfiddle and attempt to explain why they are not displaying properly? https://jsfiddle.net/qs769rk6/

Upvotes: 1

Views: 4187

Answers (1)

Julien &#39;JS&#39;
Julien &#39;JS&#39;

Reputation: 149

In your case , the viewBox of each symbol is wrong, the first two arguments (which are at 0 0) , are not good . Both of these arguments is to move the mask to display the correct area, out in your case the mask is at the wrong place. For the #icon-menu, try to set the viewBox like this : viewBox="335 165 40 32".

Upvotes: 2

Related Questions