SVG受display影响:none;即使display:none只在导航选择器下

Question

header {
display: flex;
justify-content: space-between;
}
nav {
display: none;
}
header svg {
width: 3em;
margin-top: -6em;
cursor: pointer;
}

<div>
<header>
<a href="#" class="logo">Shoe<span>Brand</span></a>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sneakers</a></li>
<li><a href="#">Players</a></li>
</ul>               
</nav>
<svg class="close" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24 32H0V26.6667H24V32ZM48 18.6667H0V13.3333H48V18.6667ZM48 5.33333H24V0H48V5.33333Z" fill="white"/>
</svg> 
</header>

我尝试在导航中特别引用ul和li标签，但我仍然看不到svg。更让我困惑的是，光标指针仍然工作，即使那里什么也没有。

我想隐藏导航而不影响svg。

Answer 1

给路径设置一个填充色并去掉负边距

header {
display: flex;
justify-content: space-between;
}
nav {
display: none;
}
header svg {
width: 3em;
cursor: pointer;
}

<header>
<a href="#" class="logo">Shoe<span>Brand</span></a>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sneakers</a></li>
<li><a href="#">Players</a></li>
</ul>
</nav>
<svg class="close" viewBox="0 0 48 32" xmlns="http://www.w3.org/2000/svg">
<path d="M 24 32 H 0 V 26.6667 H 24 V 32 Z M 48 18.6667 H 0
V 13.3333 H 48 V 18.6667 Z M 48 5.3333 H 24 V 0 H 48 V 5.3333 Z" fill="black" />
</svg>
</header>