Search code examples
javascriptsvgcollision-detectionraphael

Detecting wether a point is inside or outside of a raphael.js shape

I have a raphael.js shape which I am plotting circle's on top of. I only want a circle to appear if the circle does not go off the boundary of the shape it is being plotted on to.

To make this more clear, here is an example of what I do not want to happen:

Example http://img682.imageshack.us/img682/4168/shapeh.png

I want the circles outside of the grey area not to appear. How would I detect wether a circle is inside or outside of the grey shape?

Solution

  • You could just apply a clip-path (that should be defined to be the grey shape you have in your example) on a group (<g> element) containing the circles.

    See this example from the w3c SVG testsuite for how to use clip-paths.