Jump to content
Search Community

Drop draggables on SVG Clipped elements

chriswyl test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I'm trying to solve the problem.


In this example , when I drag red box on to circle , the image is change in both element (rectangle and circle with photo).

Second situation, problem, drag red box on circle , but little bit outer (in bounds circle). The image is change in the circle it should not do this.

I know that hitTest gets a bounds of object.


Maybe do you have some idea?

See the Pen NqbBvd?editors=101 by amonk (@amonk) on CodePen

Link to comment
Share on other sites

Hi and thanks for the demo.


Maybe in the future just use solid colors that change on your hit tests as it seems FireFox and Chrome don't like loading images from other domains in iframes or something. Couldn't see any images change on this end.


That aside, your assumption is correct. hitTest() uses the bounding rectangle of an element and completely disregards any clipping or other effects that you may use to hide parts of the element. 


Unfortunately, I don't have any ideas for a solution at the moment.

If you find any other resources or tools that account for clipping in collision detection it would be helpful to know about, especially if there is something supported by SVG specs. 

  • Like 1
Link to comment
Share on other sites

Your options for hit testing a path are going to be very limited at the moment. The SVG 1.1 .getIntersectionList() method will do this, but the problem is that Firefox hasn't implemented it yet, so it's kind of useless. Check out this working example...




You may not know this, but you can pass in a point instead of an element to Draggable's hitTest method. Doing this will allow you to more accurately test hits against different shapes. 

// Exactly at 100,200
this.hitTest({ pageX: 100, pageY: 200 });

// Inside 100,200 relative to its top/left
this.hitTest({ left: 100, top: 200 });

Here's an

See the Pen JoQbya by osublake (@osublake) on CodePen

of how to do this. There's only 1 point at the moment, but hopefully you can see how you could calculate a rough outline of a path.


See the Pen JoQbya by osublake (@osublake) on CodePen


If that doesn't work for you, then you're going to have to figure out how to do something like ray casting or projections. I've used the seperation axis theorem (SAT) in the past, which works well, but only on concave shapes. It won't work on convex shapes like Pacman. I haven't tried it on SVG elements, only canvas objects, but I'm going to try and convert some of it over and post a demo later on.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...