hitTest() on elements inside an SVG

[turrf]

Hello friends, I'm working on hit testing if a draggable knob has hitted certain <line> indicators in a SVG. But I'm having trouble to get it work. As the codepen (modified based on Diaco M.Lotfollahi's work) shows, I tried to log something on console but the hit test seems doesn't recognize the indicator. Can anyone help? Thanks.

 

 

 

See the Pen OrjWZR by turrf (@turrf) on CodePen

[OSUblake]

You're not dragging anything. Look at what the target is here. It's a div that isn't in the DOM.

 

// Drags a proxy element
Draggable.create(document.createElement('div'), {

});

 

 

Please check the docs for .hitTest(), and read about the static version at the bottom.

https://greensock.com/docs/Utilities/Draggable/static.hitTest()

 

 

So you could do this.

 

if (Draggable.hitTest(knob, "#work3", "5px")) {
  console.log("hitted!")
}

 

 

Not sure what you're trying to achieve, but this looks like it might be easier to do if you just create a draggable with type: "rotation". That will of course only work if your gauge is a semi-circle. It's kind of hard to tell from your demo.

[turrf]

Thank you for your answer OSUblake. I have resolved the issue. I was using the hitTest in a wrong way.