如何使用jQuery

的SVG環繞多邊形一「格」的標籤，這是例如我的SVG代碼..如何使用jQuery

<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，因爲對於多邊形theres只有一個attr ...點！我該怎麼辦？ :(

來源

2012-03-21 Azad Zain

請看看這個小提琴http://jsfiddle.net/SLJp4/。在這種小提琴，廣場是一個多邊形。要繼續，請按「縮放多邊形」按鈕（滾動頁面有點看的按鈕），紅色褪色格在身體你達到這個紅色的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部分本身中。

來源

2012-03-22 09:14:13 rajkamal

如何使用jQuery

回答

相關問題