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，但我终于找到了解决办法（我找了几个星期都找不到解决办法）