SVG圖示在設定visibility: hidden和0高度和寬度後仍不可見
P粉764836448
P粉764836448 2023-09-16 17:29:10
0
1
539

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

.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(只要這段程式碼存在)。

P粉764836448
P粉764836448

全部回覆(1)
P粉009828788

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

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

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

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板