13

Is it possible in SVG, using any method, to call an even if two specific elements touch? Or would I have to code the long way, and figure out if their borders touch with complicated maths?

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
mortalc
  • 525
  • 1
  • 5
  • 9

2 Answers2

14

There are actually four methods available on the outermost SVG element for intersection handling in the SVG 1.1 DOM:

  1. getIntersectionList
  2. getEnclosureList
  3. checkIntersection
  4. checkEnclosure

Unfortunately I think the cross-browser support for these methods is still not great.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • 1
    So, it looks like you can check for the intersection of an arbitrary shape and a rectangle, but you can't do it for two non-rectangles. Is that about right? – Mike Baranczak Mar 23 '11 at 06:06
  • 1
    Yes, that's correct, the above doesn't provide you with full boolean path operations. – Erik Dahlström Mar 23 '11 at 12:15
  • It doesn't look like any of these elements are implemented into any browsers. At least not any working versions. – Ash Blue Aug 12 '12 at 00:44
  • @AshBlue sounds like you have a question to ask, but like I wrote these methods aren't yet widely implemented. Opera and IE9+ supports them AFAIK. – Erik Dahlström Aug 13 '12 at 08:25
  • @erik I tried it in IE9, but for some reason its refusing to detect an intersection with 2 the squares. Can you perhaps provide a simple usage example? – Ash Blue Aug 14 '12 at 14:02
  • 1
    Current (Oct '13) state of browser support: Chrome, Safari, IE9+ support them. Firefox [currently does not implement these methods](https://developer.mozilla.org/en-US/docs/SVG_in_Firefox). – Tim Oct 30 '13 at 17:13
  • It is important to notice that only bounding boxes of the elements are considered for the check. Bounding boxes of freeforms are always rectangles. – kernel May 09 '16 at 14:16
2

I don't think there are any built-in methods, but this guy wrote a Javascript library that detects collisions:

http://www.kevlindev.com/geometry/2D/intersections/index.htm

Looks pretty slick. It doesn't work in Firefox 3.6, but works in Chrome.

EDIT:

OK, there actually is a built-in method, but I don't know if it can be applied to anything besides rectangles. Erik Dahlström, the author of that post, hangs out on Stackoverflow, so he might have something to say about this.

Mike Baranczak
  • 8,291
  • 8
  • 47
  • 71