Javascript 拖动svg矩形

当我尝试拖动一个svg矩形（如下图所示）时，它首先选择页面上的任何文本，然后成为可拖动的。我如何让它一开始就可以拖动

<g
      onDragStart={this.onDragStart}
      onDrag={this.onDrag}
      onDragEnd={this.onDragEnd}>
   <rect></rect>
   <text>{text}</text>
</g>

---

事实证明，我应该使用onMouseDown、onMouseMove、onMouseOut和onMouseUp事件在组件状态中添加bool属性“active”。现在它起作用了

<g
  onMouseDown={this.onDragStart}
  onMouseMove={this.onDrag}
  onMouseOut={this.onDrag}
  onMouseUp={this.onDragEnd}>
   <rect></rect>
   <text>{text}</text>
</g>

  onDragStart = (event) => {
    this.setState({
      active: true,
      dx: event.clientX - this.state.x,
      dy: event.clientY - this.state.y
    });
  };

  onDrag = (event) => {
    if(this.state.active)
      this.setState({
        x: event.clientX - this.state.dx,
        y: event.clientY - this.state.dy
      });
  };

  onDragEnd = (event) => {
    this.setState({
      active: false,
      x: event.clientX - this.state.dx,
      y: event.clientY - this.state.dy
    });
  };

{text}
onDragStart=（事件）=>{
这是我的国家({
主动：对，
dx:event.clientX-this.state.x，
dy:event.clientY-this.state.y
});
};
onDrag=（事件）=>{
if（this.state.active）
这是我的国家({
x:event.clientX-this.state.dx，
y:event.clientY-this.state.dy
});
};
onDragEnd=（事件）=>{
这是我的国家({
活动：错误，
x:event.clientX-this.state.dx，
y:event.clientY-this.state.dy
});
};

听起来你在说什么？@Chris W.，在添加了.noselect类之后，它实际上没有选择rect中的文本，但它仍然像是一个选择（鼠标光标），在我没有从svg中选择某些内容之前，它仍然是不可更改的。因此，我发现问题不是文本标记。它发生在我使用rect时。值得注意的是，它适用于圆形。请提供

<g
  onMouseDown={this.onDragStart}
  onMouseMove={this.onDrag}
  onMouseOut={this.onDrag}
  onMouseUp={this.onDragEnd}>
   <rect></rect>
   <text>{text}</text>
</g>

  onDragStart = (event) => {
    this.setState({
      active: true,
      dx: event.clientX - this.state.x,
      dy: event.clientY - this.state.y
    });
  };

  onDrag = (event) => {
    if(this.state.active)
      this.setState({
        x: event.clientX - this.state.dx,
        y: event.clientY - this.state.dy
      });
  };

  onDragEnd = (event) => {
    this.setState({
      active: false,
      x: event.clientX - this.state.dx,
      y: event.clientY - this.state.dy
    });
  };