SVG icon still invisible after setting visibility: hidden and 0 height and width

Question

So I need to hide my menu and only show it when I press a tab. What I did was write the following class:

.not-visible {
    transform: scale(0);
    height: 0px;
    width: 0px;
    margin: 0;
    padding: 0;
    visibility: hidden;
}

.not-visible * {
    margin: 0;
    padding: 0;
    height: 0px;
    width: 0px;
}

This works perfectly so that the content doesn't take up any space. But there's a problem here - when I do this, my SVG image doesn't display. After some reasoning, I found out that if you have visibility: hidden; in a class and in an item inside this class width height = 0, it will appear like this. Why does SVG work like this? I try to write these 3 parameters myself

.repair-price-box .button-close {
    border: 1px solid black;
    visibility: visible;
    height: 25px;
    width: 25px;
}

But it doesn't change anything. It's like once I change these parameters, they break the SVG forever (as long as this code exists).

Answer 1

Anyway, I found the solution...so I found out that I don't actually need these 3 lines of code. What I need is:

.not-visible {
    transform: scale(0);
    height: 0px;
    width: 0px;
    margin: 0;
    padding: 0;
    opacity: 0;
}

.not-visible * {
    margin: 0;
    padding: 0;
}

Anyway, I don't know why these 3 lines of code broke the SVG, but I finally found the solution (I searched for weeks and couldn't find a solution)