Ikon SVG masih tidak kelihatan selepas menetapkan keterlihatan: tersembunyi dan 0 tinggi dan lebar

Question

Jadi saya perlu menyembunyikan menu saya dan hanya menunjukkannya apabila saya menekan tab. Apa yang saya lakukan ialah menulis kelas berikut:

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

Ini berfungsi dengan sempurna supaya kandungan tidak mengambil sebarang ruang. Tetapi terdapat masalah di sini - apabila saya melakukan ini, imej SVG saya tidak dipaparkan. Selepas beberapa alasan, saya mendapati bahawa jika anda mempunyai keterlihatan: tersembunyi; dalam kelas dan dalam item di dalam kelas ini lebar + tinggi = 0, ia akan berkelakuan seperti ini. Mengapa SVG berfungsi seperti ini? Saya cuba menulis sendiri 3 parameter ini

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

Tetapi ia tidak mengubah apa-apa. Ia seperti sebaik sahaja saya menukar parameter ini, mereka memecahkan SVG selama-lamanya (selagi kod ini wujud).

Answer 1

Apa pun, saya telah menemui penyelesaiannya...jadi saya dapati bahawa saya sebenarnya tidak memerlukan 3 baris kod ini. Apa yang saya perlukan ialah:

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

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

Bagaimanapun, saya tidak tahu mengapa 3 baris kod ini memecahkan SVG, tetapi saya akhirnya menemui penyelesaiannya (saya mencari selama berminggu-minggu dan tidak dapat mencari penyelesaian)