I am facing an issue with displaying my .svg file in my next-js project. It seems that the CSS code svg:not(:root) { overflow: hidden; } is causing the problem.
Could someone explain what this particular CSS rule is for?
After changing the code to svg:not(:root) { overflow: visible; }, the SVG icons are now showing. However, I have another website where the SVG icons display fine despite using svg:not(:root) { overflow: hidden; }. I can't seem to find any significant differences in the CSS of these two websites, leaving me confused about the purpose of svg:not(:root).
Below is how I am using the 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>
And here is a snippet from the content of test.svg:
<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>