problem getting x/y position of target svg element

[mindthegap]

I have a simple set, a svg with some target circles and a few icosn to drag.
 

    <g stroke="f1f1f1" fill="orange" stroke-width="0.5" id="targetcircle">
      <circle cx="45" cy="220" r="40" id="c0" />
      <circle cx="135" cy="220" r="40" id="c1" />
      <circle cx="225" cy="220" r="40" id="c2" />
      <circle cx="315" cy="220" r="40" id="c3" />
      <circle cx="415" cy="220" r="40" id="c4" />
      <circle cx="605" cy="220" r="40" id="c5" />
    </g>



    <image xlink:href="../assets/logo.png" x="0" y="0" height="50px" width="50px"></image>
    <image xlink:href="../assets/giraffe.svg" x="50" y="500" height="100px" width="100px"  class="icon" id="e1"></image>
    <image xlink:href="../assets/giraffe.svg" x="150" y="500" height="100px" width="100px" class="icon" id="e2"></image>
    <image xlink:href="../assets/giraffe.svg" x="250" y="500" height="100px" width="100px" class="icon" id="e3"></image>
    <image xlink:href="../assets/giraffe.svg" x="350" y="500" height="100px" width="100px" class="icon" id="e4"></image>
    <image xlink:href="../assets/giraffe.svg" x="450" y="500" height="100px" width="100px" class="icon" id="e5"></image>

insode a vuejs mounted method I add the drag&drop behaviour, like in the demo on this site. works great!

 

Now I got problems to move the icon to the circles poition when the hittest is true.

 

I am using the getBBo function, but it return NAN for cx and the cy values. why? is the image not an svg element?
   

 gsap.set('.icon', {
      x: 0,
      y: 0,
      rotation: 0,
      scale: 1.0,
      transformOrigin: "center" 
    });

    Draggable.create("#e1", {
      bounds:"svg",
      onPress: function(){
        console.log(this.target);
      },
      onDrag: function() {
        if (this.hitTest("#c1")) {

        const box1 = getBBox("#c1");
        const box2 = getBBox("#e1");
        console.log(box1, box2);
        const dx = box2.cx - box1.cx;
        const dy = box2.cy - box1.cy;
        console.log(dx, dy);


          gsap.to("#e1", {duration: 0.6, opacity:0.5, scale:.7, x: dx, y: dy});
          Draggable.get("#e1").disable();
        }
      }
    });
    


function getBBox(element, withoutTransforms, toElement) {
  
  var svg = element.ownerSVGElement;
  
  if (!svg) {
    return { x: 0, y: 0, width: 0, height: 0 };
  }
    
  if (withoutTransforms) {
    return element.getBBox();
  }
  
  var p = svg.createSVGPoint();
  var r = element.getBBox();     
      
  var matrix = (toElement || svg).getScreenCTM().inverse().multiply(element.getScreenCTM()); 

  p.x = r.x;
  p.y = r.y;
  var a = p.matrixTransform(matrix);

  p.x = r.x + r.width;
  p.y = r.y;
  var b = p.matrixTransform(matrix);

  p.x = r.x + r.width;
  p.y = r.y + r.height;
  var c = p.matrixTransform(matrix);

  p.x = r.x;
  p.y = r.y + r.height;
  var d = p.matrixTransform(matrix);

  var minX = Math.min(a.x, b.x, c.x, d.x);
  var maxX = Math.max(a.x, b.x, c.x, d.x);
  var minY = Math.min(a.y, b.y, c.y, d.y);
  var maxY = Math.max(a.y, b.y, c.y, d.y);
    
  var width = maxX - minX;
  var height = maxY - minY;
  
  return {
    x: minX,
    y: minY,
    width: width,
    height: height,
    cx: minX + width / 2,
    cy: minY + height / 2
  };
}

 

[GreenSock]

This isn't really a GSAP question - the issue is that your getBBox() method is executing this: 

if (!svg) {
  return { x: 0, y: 0, width: 0, height: 0 };
}

So it's returning an object that doesn't have any cx or cy property. 

 

The reason it thinks it's not an SVG is because you're passing a STRING into the function instead of the actual element. So your upstream error is here:

// BAD
const box1 = getBBox("#c1");
const box2 = getBBox("#e1");

// GOOD
const box1 = getBBox(document.querySelector("#c1"));
const box2 = getBBox(document.querySelector("#e1"));

Happy tweening!