如何通过点击来改变svg元素的前后颜色？

<svg id="my-svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

var svg = document.getElementById("my-svg");
svg.addEventListener("click", changeColor);

function changeColor() {
  var circle = document.querySelector("#my-svg circle");
  var currentColor = circle.getAttribute("fill");
  
  if (currentColor === "blue") {
    circle.setAttribute("fill", "red");
  } else {
    circle.setAttribute("fill", "blue");
  }
}