SVG drag elements on the edges of the path

Question

I have the path as described in the attached image 1, and I want to drag and drop the another element (as rounded red) on the edges of the drawn path, so at the end I want to drag the red marked element on the black line that is edge of the path, not inside the path,and now i can move inside and outside the path, but I want only to be on the border of the path

So here I have the customized the code as below on the mouseMove function and on the select case svgedit.compiled.js

if (path_child == 'path') {
    var line_rotate = 90;
    if (group_w_d == "drag_drop_D") {
        var test = 'rotate(' + line_rotate + ',' + line_pt.x + ',' + line_pt.y + ') translate(' + trans_x + ',' + line_pt.y + ') scale(' + width + ',' + height + ')';
    } else {
        var test = 'rotate(' + line_rotate + ',' + line_pt.x + ',' + line_pt.y + ') translate(' + line_pt.x + ',' + line_pt.y + ') scale(' + width + ',' + height + ')';
    }
    selectedElements[0].setAttribute('transform', test);

    var cls = selectedElements[0].getAttribute('class');
    //alert(cls);
    $('.' + cls).each(function() {
        $(this).attr('transform', test)
    });
}

For example here is the fiddle link example , which I want exactly, here we can move the ellipse on the path wherever we want, but I want it to be on the edges of my path elements

Edited: For example just imagine that we are creating a room using rectangle and in this room we have to fix a door or window,like marked as rounded red, so we can move the path along all the position of the rectangle but it should only on the edges not inside the rect or outside the rect , there is no problem about it we done it,

But now we want split the wall to extended wall so we converted the rect into path after converting this the doors or windows are not moving along with the edges of the path instead of this the doors are moving anywhere on the working area of the SVG-EDIT

and here my doors and windows are the g not ellipse , so i know ellipse only have the cx,cy and g may have the transform so am not clear how to do it i hope this will make sense

Answer 1

You need to tweak my SO answer , see the comment section for triangle fiddle ( SO wont let me post fiddle link w/o code ). Basically extend line from the centroid of triangle and calculate the intersection path.

Edit: In native SVG, you need an intersection library for line with line

Do post the updated code here for future readers.