React组件中如何检测SVG半圆path元素被点击的是左半还是右半区域

我们可以通过坐标转换+分界值对比的方式完成判断，逻辑如下：

• 首先从你提供的path参数可以算出，该半圆的圆心x坐标为325.971，左右半区的分界线就是过这个点的竖直线
• 点击事件触发时，把浏览器原生的点击坐标转换成SVG内部坐标系的坐标，和分界值对比即可快速判断所属区域

具体代码实现 #

import { useRef } from 'react';

const SemicircleComponent = () => {
  const svgRef = useRef(null);

  const handlePathClick = (e) => {
    // 获取SVG元素的坐标转换对象
    const svg = svgRef.current;
    const point = svg.createSVGPoint();
    // 传入浏览器视口下的点击坐标
    point.x = e.clientX;
    point.y = e.clientY;
    // 转换为SVG内部坐标系的坐标，适配SVG缩放、页面滚动等场景
    const svgPoint = point.matrixTransform(svg.getScreenCTM().inverse());
    
    // 半圆圆心的X坐标，作为左右分区的分界值
    const CENTER_X = 325.971;
    if (svgPoint.x < CENTER_X) {
      console.log('点击了左半区域');
      // 左半区自定义逻辑
    } else {
      console.log('点击了右半区域');
      // 右半区自定义逻辑
    }
  };

  return (
    <svg 
      ref={svgRef}
      viewBox="0 0 651 592" 
      fill="none" 
      xmlns="http://www.w3.org/2000/svg"
    >
      <path 
        onClick={handlePathClick}
        d="M636.971 285C636.971 322.427 628.927 359.487 613.298 394.065C597.668 428.643 574.76 460.061 545.881 486.525C517.002 512.99 482.718 533.983 444.986 548.306C407.253 562.628 366.812 570 325.971 570C285.13 570 244.689 562.628 206.957 548.306C169.224 533.983 134.94 512.99 106.061 486.525C77.1818 460.061 54.2737 428.643 38.6445 394.065C23.0153 359.487 14.9711 322.427 14.9711 285H110.253C110.253 310.96 115.833 336.666 126.674 360.65C137.515 384.634 153.404 406.427 173.435 424.783C193.467 443.14 217.247 457.701 243.419 467.636C269.591 477.57 297.643 482.684 325.971 482.684C354.3 482.684 382.351 477.57 408.523 467.636C434.695 457.701 458.475 443.14 478.507 424.783C498.538 406.427 514.428 384.634 525.268 360.65C536.109 336.666 541.689 310.96 541.689 285H636.971Z" 
        fill="red"
      />
    </svg>
  );
};

export default SemicircleComponent;

注意事项 #

不要直接用e.clientX和分界值对比，因为SVG可能被缩放、平移，或者页面存在滚动、偏移等场景，原生点击坐标和SVG内部坐标不匹配，会导致判断错误。如果后续修改了半圆的path参数，只需要更新CENTER_X为新的圆心x坐标即可。

内容的提问来源于stack exchange，提问作者Drem Edys