当我将鼠标悬停在SVG按钮上时，它不会改变颜色

svg:hover {
  fill: #ff0000; /* 设置悬停时的填充颜色 */
}

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect id="btn" width="100" height="100" fill="#000000" />
  <script>
    var btn = document.getElementById('btn');
    btn.addEventListener('mouseover', function() {
      btn.setAttribute('fill', '#ff0000'); // 设置悬停时的填充颜色
    });
    btn.addEventListener('mouseout', function() {
      btn.setAttribute('fill', '#000000'); // 恢复默认填充颜色
    });
  </script>
</svg>