SVG將元素拖動到路徑的邊緣

Question

我具有如所附圖像1中所述的路徑，我想在繪制路徑的邊緣上拖放另一個元素（如四舍五入的紅色），因此最后我想將黑色的紅色標記的元素拖動到是路徑邊緣的線，不在路徑內部，現在我可以在路徑的內部和外部移動，但我只想位於路徑的邊界上

所以在這里，我在mouseMove函數和select案例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)
    });
}

例如 ，這是我想要的小提琴鏈接示例 ，在這里我們可以將橢圓移動到所需路徑上的任意位置，但我希望它位於路徑元素的邊緣

編輯：例如，假設我們正在使用矩形創建一個房間，並且在該房間中我們必須修復門或窗戶，如標記為紅色的圓形，因此我們可以沿矩形的所有位置移動路徑，但僅應在沒有內部的邊緣rect或外rect ，是沒有問題的它我們就照辦了，

但是現在我們想將牆壁分割為延伸的牆壁，因此我們將rect轉換為path之后，將門或窗戶不沿着path的邊緣移動，而不是將門移動到SVG-EDIT工作區域的任何位置， SVG-EDIT

在這里我的門窗不是g ellipse ，所以我知道橢圓形只有cx，cy和g可以進行transform所以不清楚如何做到這一點，我希望這會有意義

Answer 1

您需要調整我的SO答案 ，請參閱三角小提琴的注釋部分（因此， 我不會讓我張貼無音樂的小提琴鏈接 ）。 基本上從三角形的質心開始延伸線並計算相交路徑。

編輯：在本機SVG中，您需要一個相交庫以用於線與線

請在此處發布更新的代碼，以供將來的讀者使用。