Question

这是我的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;">');

    }

我不能像rect那样做，因为对于多边形，只有一个attr ... POINTS！

Answer 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放到计算点上。

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

如何在SVG中的多边形周围包装“div”标签？

1 个答案: