如何在SVG区域上移动元素而不让它出来？

Question

我有一个元素[现在它是一个div，但如果它更适合我可以替换另一个东西]我想移动一个SVG多边形，我希望它不会交叉SVG边界。问题是用户可以点击另一个地方，div将飞越我的SVG未覆盖的区域。我试图使用getBoundingClientRect（），但它将SVG视为边界框，并且无法识别多边形区域。

无论如何可以做到吗？

编辑：这是我用来获取点击位置的函数[我稍后会计划解决的一些解决方法]并更改移动div的资源：

$('.svg-area').click(function(e){
    var offset = $(this).offset();
    var x = (e.pageX - offset.left) + 120;
    var y = (e.pageY - offset.top) + 160;
    $('.diego').html('<img src="assets/img/diego_diagonal_frente.gif">');
    $('.diego').animate({
        'top': y,
        'left': x
    }, 1500, function(){
        $('.diego').html('<img src="assets/img/diego_diagonal_parado.gif">');
    });
});