How to detect one element sitting on top of another

Question

I have this situation:

enter image description here

I need to detect situation when element sitting on top of another. This is SVG elements:

<circle r="210.56" fill="#1ABCDB" id="01" priority="4" cx="658" cy="386"></circle>
<circle r="210.56" fill="#1ADC4A" id="02" priority="4" cx="858" cy="386"></circle>

I have to clue how to do this, maybe someone can give me some hint. I use jQuery. Much thx for help.

These might help you: http://stackoverflow.com/questions/1560926/efficiently-detect-when-sibling-elements-overlap and http://stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery — Joe, Jun 14 '13 at 12:15

score 1 · Answer 1 · answered Jun 14 '13 at 12:37

Well, at least if you're dealing with circles, it's a bit simple, because circles have a nice property: for circles to overlap in any way, the sum of their radii should be greater than the distance between their two centers.

So it should just be a matter of:

figuring out the distance between the two center points (easy enough to get the centers, as they're defined in the <circle> element, and
add the two radius values (again, on the <circle> element), then
just compare. If the radius sum is greater than the distance, then you've got an overlap.

http://jsfiddle.net/sZ9N9/

so nice, thx for that, but what when i will be have more than 2 elements, f.e. 20? how to unify that? — Lukas, Jun 14 '13 at 12:58

score 0 · Answer 2 · answered Jun 14 '13 at 12:30

You could look at this function:

http://jsfiddle.net/a9bnh/

function upperElements(el) {
    var top = el.offsetTop,
        left = el.offsetLeft,
        width = el.offsetWidth,
        height = el.offsetHeight,
        elemTL = document.elementFromPoint(left, top),
        elemTR = document.elementFromPoint(left + width - 1, top),
        elemBL = document.elementFromPoint(left, top + height - 1),
        elemBR = document.elementFromPoint(left + width - 1, top + height - 1),
        elemCENTER = document.elementFromPoint(parseInt(left + (width / 2)), parseInt(top + (height / 2))),
        elemsUpper = [];
    if (elemTL != el) elemsUpper.push(elemTL);
    if (elemTR != el && $.inArray(elemTR, elemsUpper) === -1) elemsUpper.push(elemTR);
    if (elemBL != el && $.inArray(elemBL, elemsUpper) === -1) elemsUpper.push(elemBL);
    if (elemBR != el && $.inArray(elemBR, elemsUpper) === -1) elemsUpper.push(elemBR);
    if (elemCENTER != el && $.inArray(elemCENTER, elemsUpper) === -1) elemsUpper.push(elemCENTER);
    return elemsUpper;
};

score 0 · Answer 3 · edited May 23 '17 at 10:32

Richard's answer is good if there are 2 circles but if there are many then I would suggest the following steps

Calculating the area covered by the overlapping circles
Calculating the sum of areas of all the circles independently(since this is SVG and the radii of the circles are known, this would be easy to do)
Comparing the 2 areas
If the 2 areas are the same, then there is no overlapping otherwise at least 2 circles overlap.

The tricky step is step 1 which can be approximiately calculated using pixel painting algorithm(my preference). For other methods, you can go through the following stackoverflow question

How to detect one element sitting on top of another

3 Answers3