How to Check intersection of Svg elements

Question

I am working on a web based application where user can create multiple svg elements. all elements are 'path' (closed path either square or rectangle). User can move and rotate any element.

Now i want to alarm user when one element touches or intersect any other element .

any help would be appreciated.

thanks.

here is the jsfiddle linke http://jsfiddle.net/nnYSp/

Code is :-

 <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="500">
              <path id="obj1" d="M 100 50 L 150 50 150 120 100 120 z" stroke="black" stroke-width="2" fill="yellow" move transform="translate(10,0) rotate(45,125,85)"/>

        <path id="obj2" d="M 150 150 L 200 150 200 200 150 200 z" stroke="red" stroke-width="2" fill="black" move transform="translate(10,0)"/>

        </svg> 

        <script type="text/javascript">
            document.addEventListener('mousedown', mousedown, false);
            document.addEventListener('mousemove', mousemove, false);
            document.addEventListener('mouseup', mouseup, false);

            var obj1_rotate_string="rotate(45,125,85)";
            var obj1_translate_values={
                x:10,
                y:0
            }

            var obj2_rotate_string="";
            var obj2_translate_values={
                x:10,
                y:0
            }

            var mousedownFlag=false;
            var mousedown={
                x:0,
                y:0
            }

            var targetObj={
                t:null,
                r:null,
                obj:null
            };

            function mousedown(event){
                if(event.target.hasAttribute('move')){
                    mousedownFlag=true;
                    mousedown.x=event.pageX;
                    mousedown.y=event.pageY;
                    var Obj=event.target.id;                   
                    if(Obj==='obj1'){                        
                        targetObj.obj='obj1'
                    }
                    else{                         
                        targetObj.obj='obj2'
                    }


                }

            }

            function mousemove(event){
                if(mousedownFlag){
                    var dx=event.pageX-mousedown.x;
                    var dy=event.pageY-mousedown.y;

                    if(targetObj.obj==='obj1'){
                        obj1_translate_values.x+=dx;
                        obj1_translate_values.y+=dy;
                        var obj=document.getElementById(targetObj.obj);
                        obj.setAttribute('transform', 'translate('+ obj1_translate_values.x+','+ obj1_translate_values.y+')'+ obj1_rotate_string);

                    }
                    else if(targetObj.obj==='obj2'){
                        obj2_translate_values.x+=dx;
                        obj2_translate_values.y+=dy;
                        var obj=document.getElementById(targetObj.obj);
                        obj.setAttribute('transform', 'translate('+ obj2_translate_values.x+','+ obj2_translate_values.y+')'+ obj2_rotate_string);

                    }

                    mousedown.x=event.pageX;
                    mousedown.y=event.pageY;
                }
            }

            function mouseup(event){
                mousedownFlag=false;

            }
        </script>

    </body>

I suggest you use raphael and then you can use a combination of http://raphaeljs.com/reference.html#Element.getBBox and http://raphaeljs.com/reference.html#Paper.getElementsByPoint to write your logic... — Arpit Agrawal, Sep 24 '13 at 05:31
thanks for the reply, I am not using raphael and i cannot use that, so i need to find solution with native Javascript and Svg. Also BBOX does'nt work correctly if element is rotated. — RashFlash, Sep 24 '13 at 05:50
See http://stackoverflow.com/questions/5396657/event-when-two-svg-elements-touch, and note that you can apply transforms to the bbox result to get the "rotated bbox", see e.g http://my.opera.com/MacDev_ed/blog/getting-screen-boundingboxes-in-svg. — Erik Dahlström, Sep 24 '13 at 09:32
thanks Erik for the reply, i follow your post but it did'nt work in firefox and chrome. 'getScreenBBox' or 'getIntersectionList' is given error i.e. Object # has no method 'getScreenBBox' . — RashFlash, Sep 24 '13 at 15:08
Try [this library](https://github.com/thelonious/kld-intersections). I think that its existence implies that there isn't any native functionality for this. — Him, Jan 07 '20 at 01:42

score 3 · Answer 1 · answered Oct 18 '14 at 12:10

3

The problem will be easier if your paths are closed squares or rectangles.

you can read the svg dom interface checkIntersection

boolean checkIntersection(in SVGElement element, in SVGRect rect);

answered Oct 18 '14 at 12:10

cuixiping

24,167
8
82
93

1

One has to be careful when using checkIntersection. rect coordinates must be relative to the parent svg document. However, if one wants to check intersection between el1 and el2 using checkIntersection(el1, el2.getBBox()), it might fail if el2 has some transformations applied, because getBBox gets the current coordinates, not the coordinates relative to the svg – Gabriel Furstenheim Apr 16 '18 at 10:14

How to Check intersection of Svg elements

1 Answers1

Linked