svg:not(:root) overflow hidden what is it for?

user_15469002 0
Viewed 82

my .svg inside my next-js project wont show no matter what, because of:

svg:not(:root) {
  overflow: hidden;
}

what is this for?

changing it to:

svg:not(:root) {
  overflow: visible;
}

will show the svg icons, but I have another website also using svg:not(:root) { overflow: hidden; } and the svg icons are showing, I do not see any significant differences of the CSS for these 2x websites, so I am now confused, what is svg:not(:root) for?

here is how I use my svg in HTML:

<svg aria-label="check" style="width: 24px; height: 24px; position: relative;" role="presentation">
  <use xlink:href="/assets/icons/test.svg?v=130#check" style="fill: currentcolor;"></use>
</svg>

here is how the content of test.svg look like:

<svg viewBox="0 0 750 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <style>
    :root>svg {
      display: none
    }

    :root>svg:target {
      display: block
    }
  </style>

  ...

  <svg viewBox="0 0 24 24" id="check" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0z" fill="none" />
    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
  </svg>

  ...

</svg>
reactjs svg css
1 Answers

The first CSS rule you are citing is from the user agent stylesheet (the one the browser automatically applies). It just implements what the SVG 2 specification says: the CSS overflow property has an initial value of visible, but for all <svg> elements that are not the root element of a DOM tree, it should be hidden. In other words: a clip-path is drawn around the layout box for that element. Everything that is inside that box is shown, everything outside is hidden.

What has this to do with diplaying an icon that clearly sits inside the layout box? Nothing. Actually, I can't reproduce the behavior you are describing. For me, the icons remain visible regardless of the overflow value.

user_49967790
Related