SVG圖示在設定visibility: hidden和0高度和寬度後仍不可見

Question

所以我需要隱藏我的選單，只有在我按下一個選項卡時才顯示出來。我做的是編寫以下類別：

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

這樣做非常完美，以便內容不佔用任何空間。但是這裡有一個問題 - 當我這樣做時，我的SVG圖像不顯示。經過一些推斷，我發現如果類別中有visibility: hidden;並且在這個類別內部的項目中width height = 0，它就會出現這種情況。為什麼SVG會這樣運作？我嘗試自己寫這3個參數

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

但是它沒有改變任何東西。就好像一旦我改變這些參數，它們就永遠破壞了SVG（只要這段程式碼存在）。

Answer 1

無論如何，我找到了解決方案...所以我發現我其實不需要這3行程式碼。我需要的是：

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

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

無論如何，我不知道為什麼這3行程式碼會破壞SVG，但我終於找到了解決辦法（我找了幾個星期都找不到解決辦法）