pointer-events

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!--
  Circle 元素将始终拦截鼠标事件。
  为了改变较底部的 rect 元素的颜色，
  你需要点击 rect 元素在圆外的部分
  -->
  <rect x="0" y="0" height="10" width="10" fill="black" />
  <circle cx="5" cy="5" r="4" fill="white" pointer-events="visiblePoint" />

  <!--
  下面的 circle 元素将永远不会获取到鼠标事件，
  当你点击 circle 元素或者点击 rect 元素时，
  rect 元素都会改变颜色
  -->
  <rect x="10" y="0" height="10" width="10" fill="black" />
  <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" />
</svg>

window.addEventListener("mouseup", (e) => {
  // 在 #000000 和 #FFFFFF 之间随机选取一个颜色
  const color = Math.round(Math.random() * 0xffffff);

  // 将 color 变量的值按照 CSS 的要求进行格式化
  const fill = "#" + color.toString(16).padStart(6, "0");

  // 将 color 变量设置的颜色应用到实际点击的元素上
  e.target.style.fill = fill;
});