如何在React中通过onClick操作SVG路径实现交互式路径修改？

问题描述 #

• 目标是开发支持用户点击修改路径内容的交互式SVG组件
• 参考实现基于Two.js开发，原有逻辑难以迁移到React技术栈
• 目前遇到的核心障碍是：尝试给SVG绑定交互时，只能捕获整个SVG容器的点击事件，无法精准定位到内部单个路径、锚点元素的点击动作，也不确定Two.js是否是适配该需求的最优选择
• 此前基于jQuery实现过基础的路径变色逻辑，核心代码如下：

jQuery(function($){
    $('path').click(function(){
        this.style.fill = "#"+colors[i++%colors.length];
    });
});

可直接落地的实现方案 #

• 先解决“无法点击SVG内部元素”的核心问题
  出现该问题的绝大多数原因，是把SVG以img标签的方式嵌入页面：这种加载模式下SVG是被浏览器隔离的外部资源，内部DOM完全不可访问，自然无法给子元素绑事件。只要把SVG源码直接内嵌到React组件中，内部的<path>、<circle>等节点就和普通HTML元素没有任何区别，可以直接绑定独立的点击事件。
• 基础交互不需要引入任何第三方库
  如果仅需要实现“点击路径修改样式、调整内容”的基础功能，完全不需要Two.js：直接在React组件中渲染SVG结构，给每个需要交互的路径、锚点元素绑定onClick回调即可，事件对象可以直接拿到对应元素的DOM引用、自定义参数，原生能力足够支撑所有交互逻辑。
• 进阶需求的类库选型方向
  如果后续需要实现路径锚点拖拽、形状自由编辑等复杂功能，可以选择适配React生态的SVG几何编辑类库替代Two.js，不需要强行把Two.js的逻辑硬塞进React的开发模式里。

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