找到SVG线和div之间的交叉点位置

Question

我有这个东西 - http://jsbin.com/rehuzasila/edit?css,output，我有4个点代表灰线和彩色线之间的交点。

var $overlay = $('.overlay'),
    $handle = $('.handle'),
    width = $('.pane').width();


// ---------------------------


$handle.draggable({
    axis: 'x',
    containment: 'parent',
    drag: function(event, ui) {

        $overlay.width(width - ui.position.left);

    }

});

我的问题是，当我拖动灰线时，我想将点位置更改为灰线与彩色线相交的位置。

有人能解释我如何实现这个目标吗？