Svg 拖动错误的组件

我正在创建一个基于js的可拖动SVG元素

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g name="green" data-is="r-rect" x="30" y="230" width="256" height="64" rx="5" ry="5" draggable="true" fill="green"></g>
  <g name="blue" data-is="r-rect" x="10" y="110" width="256" height="64" rx="5" ry="5" draggable="true" fill="blue"></g>
</svg>

r-rect.tag

<r-rect>
        <rect ref="rect" onmousedown={hold}   />

        <script>
            tag = this;
    tag.hold = hold;
    tag.x= Number.parseInt(opts.x);
    tag.y= Number.parseInt(opts.y);
    tag._name= opts.name;

    tag.on("mount", function(e) {
        tag.refs.rect.setAttribute("x", opts.x);
      tag.refs.rect.setAttribute("y", opts.y);
      tag.refs.rect.setAttribute("width", opts.width);
      tag.refs.rect.setAttribute("height", opts.height);
      opts.rx && (tag.refs.rect.setAttribute("rx", opts.rx) );
      opts.ry && (tag.refs.rect.setAttribute("ry", opts.ry) );
    })

    function hold(e){
        console.log(tag._name)
    }
  </script>
</r-rect>

标签=这个；
tag.hold=hold；
tag.x=Number.parseInt（opts.x）；
tag.y=Number.parseInt（opts.y）；
tag._name=opts.name；
标签上（“安装”，功能（e）{
tag.refs.rect.setAttribute（“x”，opts.x）；
tag.refs.rect.setAttribute（“y”，opts.y）；
tag.refs.rect.setAttribute（“宽度”，opts.width）；
tag.refs.rect.setAttribute（“height”，opts.height）；
opts.rx&（tag.refs.rect.setAttribute（“rx”，opts.rx））；
opts.ry&（tag.refs.rect.setAttribute（“ry”，opts.ry））；
})
功能保持（e）{
console.log（标记。\u名称）
}

我添加了2个

r-rect

标记。尝试拖动蓝色矩形。但绿色矩形的

mousedown

事件始终会触发

---

我发现了这个问题。这是因为我在全局变量中分配标记实例。所以我改变了这行

tag=this至
var标记=此。它解决了这个问题