Collision detection in a SVG?

I have a SVG inside a div


On row 42, see how the 2 cub /rectangles seem to almost intersect.
I’m trying to create a way to check each row (1 - 42) to send a message if a collision happens on any row.
The 3 cube things have been generated by a database so if a collision ever happens, I want a warning to show.
Is this something JavaScript can even do?

Instead of working with the SVGs, would it not be easier to work with the numeric positional information from the database?

Anyway, I understand the view it is supposed to represent rack components in a sort of ‘cabinet projection’. If so, you would only want to check if the front rectangular faces of the objects intersect, not whether the SVGs intersect.

Are you enablling the SVGs to be dragged?

1 Like

Im not dragging the elements, heres an example

The rack on the right collisions on the three rectangles. I can get the depth of all the rectangles from the database. Because were looking at it from the side were looking at the width.
Im trying to add the widths occupied by an asset for each of the 42 slots. If the total width in that row exceeds the width of the rack, a collision occurs.
Im trying to figure out how I can assign the assets widths to each row

I suggest having two JavaScript arrays: one for front facing assets, the other for back facing assets.

So from your screenshot: front[42] would have value 7.008 and back[42] would have value 18.74. All you then need to do is to check whether front[42] + back[42] is less than 29.921.

Why do you want to try to detect overlap of SVGs?

ok, thats doable.

The reason is that the assets will be user supplied and stored in a table. I just want to let the user know those assets will not fit in the rack. This will be for planning purposes.

If it’s an HTML table you can use JavaScript to read the dimensions of assets directly from the table without creating two arrays.

You could add an extra column to the table to show a message if the assets do not fit on a shelf. Alternatively you could turn the cell text red.