Html 如何包装“a”；分区；在SVG中标记多边形？

例如，这是我的svg代码

<rect x="1531.718" y="1688.217" opacity="0.8" fill="#FEE880" enable-background="new    " width="40.67" height="27"></rect>
            <rect x="1531.718" y="1661.217" opacity="0.8" fill="#F67B9E" enable-background="new" width="40.67" height="27"></rect>
            <rect x="1335.718" y="1053.356" opacity="0.8" fill="#FEE880" enable-background="new" width="236.67" height="153.01"></rect>
            <polygon opacity="0.8" fill="#F67B9E" enable-background="new    " points="1572.388,970.547 1572.388,1016.547 
                1509.718,1016.547               "></polygon>    

如何在svg中将div环绕在多边形上时获得位置、宽度和高度。我更喜欢使用jQuery

我这样做是为了svg中的“rect”，它工作起来很有魅力代码如下：

 $('#mapArea').load('src/124/124.svg', function(){

    var inputs = $('#mapArea').find('rect');
    var inputsCount = inputs.size();

    for (i=1;i<inputsCount;i++){

        var positionX = $('#mapArea').find('rect:eq('+i+')').attr('x');
        var positionY = $('#mapArea').find('rect:eq('+i+')').attr('y');
        var width = $('#mapArea').find('rect:eq('+i+')').attr('width');
        var height = $('#mapArea').find('rect:eq('+i+')').attr('height');
        $('#mapArea').after('<div style="position:absolute;width:'+width+'px;height:'+height+'px;background:rgba(0,0,0,0.4);top:'+positionY+'px;left:'+positionX+'px;">');

    }    

$（'#mapArea'）.load（'src/124/124.svg'，function（）{
变量输入=$（'#mapArea'）。查找（'rect'）；
var inputsunt=inputs.size（）；
对于（i=1；i请看这把小提琴。在这把小提琴中，正方形是一个多边形。要继续，请按“缩放多边形”按钮（滚动一页以查看按钮）。红色褪色的div位于主体中。当您使用提供的按钮缩放和平移多边形时，红色div将改变其形状和位置

解释代码：

tl
-多边形边界框的左上角点（在usr坐标中）

br
-多边形边界框的右下角点（在usr坐标中）

我们将这些点移动到全局用户坐标

tl = tl.matrixTransform(matrix)

和
br=br.矩阵变换（矩阵）

我需要的一件事是“如何以编程方式计算宽度为2=（br.x-tl.x）*2”，其中“2”是400px/200

然后我们将红色div偏移到计算点

注意：我无法将脚本粘贴到fiddle窗口的js部分（抛出错误），因此将其粘贴到html部分本身