`display: none` vs 0 height and width on a SVG sprite sheet.

Asked Feb 15 '17 at 21:03

Active Feb 25 '17 at 07:39

Viewed 247 times

This question has a really interesting problem at the core:

Setting display: none on the SVG containing the SVG sprites (symbols) will make the clip paths that are defined and referenced within unusable, while hiding the SVG using height: 0; width: 0; will make them work.

While the question has an answer to fix the immediate problem, it does not answer why this works. I am guessing it has something to do with the Shadow DOM: it seems as the ids in the defs section are unreferable when display: none is set on the container. Could anyone shed some light on the hows and whys in this, preferably with some reference to the SVG or HTML specs?

edited May 23 '17 at 12:16

Community

asked Feb 15 '17 at 21:03

oligofren

20,744
16
93
180

4

The spec says it should work. Browsers disagree and don't support it as it's hard to do while keeping html performance unaffected. – Robert Longson Feb 15 '17 at 22:09
Great insight. Thanks for shedding some light on this. – oligofren Feb 20 '17 at 09:33

`display: none` vs 0 height and width on a SVG sprite sheet.

0 Answers0