在现有SVG上绘制多边形以捕获坐标数据

Question

我们有一个显示办公室SVG地图的Web应用程序。地图上有小图标，代表用户随身携带RF标签。这允许系统管理员查看用户所在的房间。我们正在使用Snap.SVG加载办公室SVG文件并对其进行操作以显示用户图标。挑战在于地图可以扩展到浏览器的大小。使用JavaScript确定坐标并不总是准确的，因为SVG的位置会根据浏览器大小而变化。

以下是带有图标的地图示例：

图标根据来自我们数据库的X Y坐标放置在地图上。为每个位置设置X Y坐标的值，并使用Adobe Illustrator确定。目前，我们一次只能在一个房间中放置一个图标。因为我们只有一组坐标，所以如果一次有多个人在一个房间，则图标会重叠。

该项目的第二阶段是允许用户绘制地图以指定位置。实质上，用户将设置点并创建一个多边形来表示地图上的每个位置。我们将使用多边形的坐标以及多边形的总面积来了解地图上我们可以放置图标的位置。这将允许用户在没有开发人员参与的情况下定义区域。

这是我们想要实现的目标的一个例子。

我一直在研究如何做到这一点，但除了使用谷歌地图API这样的东西在地图上绘制多边形之外，还没有发现任何东西。我找到了这个article that outlines how to dynamically pull points。我们考虑使用在地图上叠加的网格系统，并且用户定义哪些网格元素在哪些位置。所以像[A1，A2，B1，B2]。我非常喜欢多边形方法，因为它更具视觉吸引力，并且更容易被用户采用。

我们需要一些关于从哪里开始的建议，如果我们需要像snap.svg这样的东西，或者我们必须依赖其他库和snap。

更新

根据伊恩的建议，我发现了一个描述他所谈论内容的小提琴。

var S;
var pt;
var svg
var box;

window.onload = function(){
    svg = $('#mysvg')[0];
    S = Snap(svg);
    console.log( S );

    pt = pt = svg.createSVGPoint(); // create the point

    // add the rectangle
    box = S.rect(12,12, 12, 12);
    box.attr({ fill : 'red', stroke : 'none' });

    S.drag(
        function(dx, dy, posX, posY, e){

            //onmove
            pt.x = posX - S.node.offsetLeft;
            pt.y = posY - S.node.offsetTop;
            console.log(pt.x + "," + pt.y);

            // convert the mouse X and Y 
            //so that it's relative to the svg element
            var transformed = pt.matrixTransform(svg.getCTM().inverse());
            box.attr({ x : transformed.x, y : transformed.y });
        },
        function(){
            //onstart
        },
        function(){
            //onend
        }
    );

}

The Fiddle