如何在 SVG 中围绕多边形包裹“div”标签？答案

【问题标题】：How to wrap a "div" tag around a polygon in an SVG?如何在 SVG 中围绕多边形包裹“div”标签？
【发布时间】：2012-03-21 19:12:44
【问题描述】：

例如，这是我的 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>

当 div 环绕 svg 中的多边形时，如何获取位置、宽度和高度。我更喜欢使用 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;">');

    }

我不能像矩形那样做，因为多边形只有一个属性...点！

【问题讨论】：

标签： html svg polygon

【解决方案1】：

请看看这个小提琴http://jsfiddle.net/SLJp4/。在这个小提琴中，正方形是一个多边形。要继续，请按“缩放多边形”按钮（稍微滚动一页以查看按钮）。红色褪色的 div 在正文中。当您使用提供的按钮缩放和平移多边形时，此红色 div 将改变其形状和位置。

解释代码：

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

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

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

tl = tl.matrixTransform(matrix)

和br = br.matrixTransform(matrix)

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

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

注意：我无法将脚本粘贴到小提琴窗口的 js 部分（抛出错误），所以将其粘贴到 html 部分本身。

【讨论】：