获取被拖动的 SVG 元素的 ID

Question

我正在使用 svg.js 和 dragg.js 来移动一系列动态创建的对象（矩形和圆圈等）。他们都在一个名为 nodes 的组中，我可以得到被拖动项目的位置，但我在尝试检索

时迷路了

克id="dyanmicidIcreated"

我需要这个来识别移动了哪个 SVG 对象？

nodes.mouseup(node => {
  console.log("x: "+node.clientX)
  console.log("y: "+node.clientY)
})

Answer 1

您将一个处理程序传递给函数，该函数随触发的事件一起调用。因此，有关该事件的所有信息都在事件对象中（出于某种原因，您将其称为 node）。

nodes.mouseup((event) => {
    // mouse coordinates
    console.log(event.clientX, event.clientY)

    // the node which was clicked
    console.log(event.target)

    // the svgjs object
    console.log(SVG.adopt(event.target))

    // the id
    console.log(SVG.adopt(event.target).id())
})

如果您不使用箭头函数，该函数将在 svgjs 对象的范围内调用。所以你可以只使用 this:

nodes.mouseup(function (event) {
    // `this` is same as node
    console.log(this)

    // id
    console.log(this.id())
})

在 svg.js v3.0 中，您将使用 SVG(event.target) 而不是 SVG.adopt。其他一切保持不变

Answer 2

console.log(SVG.adopt(event.target.parentNode).id())

获取被拖动的 SVG 元素的 ID

Get the id of SVG element that was being dragged

javascript

svg.js