CODEWITHSUNDEEP
csssvg
TrevTheDev
TrevTheDev

Reputation: 2737

SVG icon changes when SVG sprite set to display:none

If I embed an SVG sprite 

<svg class="hidden-svg" version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="208px" height="104px" viewBox="0 0 34 34" enable-background="new 0 0 34 34" xml:space="preserve" >
   <g id="phone2">
      .....
   </g>
 </svg>

and reference an embedded icon as follows:

<svg viewBox="1 1 32 32" class="icon">
  <use xlink:href="#phone2"></use>
</svg>

If is set the SVG sprite to:

.hidden-svg {
  display: none;  
}

It changes the look of my icon. See jsbin here.

What can I do to avoid changing the icon?

Upvotes: 1

Views: 2049

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

Use visibility:hidden instead of display:none and make the original SVG width="0" and height="0" so that it doesn't take up space.

Upvotes: 4

Related Questions