Icône SVG toujours invisible après avoir défini la visibilité : masquée et 0 hauteur et largeur

Question

Je dois donc masquer mon menu et l'afficher uniquement lorsque j'appuie sur un onglet. Ce que j'ai fait, c'est écrire le cours suivant :

.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;
}

Cela fonctionne parfaitement pour que le contenu ne prenne pas de place. Mais il y a un problème ici : lorsque je fais cela, mon image SVG ne s'affiche pas. Après quelques raisonnements, j'ai découvert que si vous avez visibilité : cachée ; dans une classe et dans un élément à l'intérieur de cette classe largeur + hauteur = 0, il se comportera comme ceci. Pourquoi SVG fonctionne-t-il de cette façon ? J'essaye d'écrire ces 3 paramètres moi-même

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

Mais ça n’a rien changé. C'est comme si une fois que je modifiais ces paramètres, ils cassaient le SVG pour toujours (tant que ce code existe).

Answer 1

Quoi qu'il en soit, j'ai trouvé la solution... j'ai donc découvert que je n'avais pas réellement besoin de ces 3 lignes de code. Ce dont j'ai besoin c'est :

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

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

Quoi qu'il en soit, je ne sais pas pourquoi ces 3 lignes de code ont cassé le SVG, mais j'ai finalement trouvé la solution (j'ai cherché pendant des semaines et je n'ai pas trouvé de solution)