Javascript 单击“使用”按钮，svg图标不起作用

当我单击带有红色背景的SVG时，它不起作用，但是如果我在SVG区域之外单击，它就起作用，如果我使用普通文本，它也可以起作用

该按钮似乎受到SVG的阻碍

我的问题是为什么使用SVG不起作用，但是使用文本起作用，如果我想让它起作用呢

css:

.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.dropbtn:悬停，.dropbtn:焦点{
背景色：#3e8e41；
}
.下拉列表{
浮动：对；
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
右：0；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表a:悬停{背景色：#ddd；}
.show{display:block；}

html:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">
    <svg viewBox='0 0 10 8' width='40' style="background:red;">
        <path d='M1 1h8M1 4h 8M1 7h8' stroke='#000' stroke-width='2' stroke-linecap='round'/>
    </svg>
  </button>
  
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</div>

javascript:

<script>
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

在大多数浏览器中，SVG不能作为单击区域使用。您要做的是将以下内容放在svg上，使其可以说是“对单击透明”，或者说是正确的术语，它所做的实际上是使其不可单击

.dropbtn > svg {
  pointer-events: none;
}

.dropbtn > svg {
  pointer-events: none;
}