1

要素の配置に問題があります。さらにsvgパス要素を含むdiv要素があります。マークアップは次のようなものです：

 <div style="position:absolute;" class="svg">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <path id="path203" d="M150 0 L75 200 L225 200 Z" />
  </svg>
 </div>

ユーザーがパスにマウスオーバーしたときに、パス要素の周りに境界線を設定したい。このためには、パス要素の高さと重みにアクセスし、それらの値を親の div 要素の高さと幅として設定する必要があります。このために、getBoundingClientRect() を使用しました。コード :

 var box = document.getElementById("path203").getBoundingClientRect();
 $("#path203").parents("div.svg").css({ width: box.width + "px", height: box.height + "px" });

ここで私の問題はこれで完全には解決されませんが、境界線のみを取得しますが、div の位置とその子パス要素は同じではなく、両方とも異なるオフセット値を持っています。したがって、このために、親divの上部と左側も設定します:

 var box = document.getElementById("path203").getBoundingClientRect();
 $("#path203").parents("div.svg").offset({ left: box.left + "px", top: box.top });

これで div は正しい位置になりましたが、その子パス要素はその位置から離れて移動します。その理由は、path 要素が div 要素の子であるためです。したがって、 div を移動すると、そのすべての子要素も同時に移動します。子要素のオフセットを変更せずに、親の div オフセット値を変更するにはどうすればよいですか?

4

2 に答える 2

0

これはあなたが達成しようとしていることですか？

<div style="position:absolute;" class="svg">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="302" height="202">
   <path id="path203" d="M150 0 L75 200 L225 200 Z" onmouseover="showRect()" onmouseout="hideRect()" />
   <rect id="border203" fill="none" stroke="black" stroke-width="1"/>
   <script>
     function showRect() {
         var bbox = document.getElementById("path203").getBBox();
         var border = document.getElementById("border203");
         border.x.baseVal.value = bbox.x;
         border.y.baseVal.value = bbox.y;
         border.width.baseVal.value = bbox.width;
         border.height.baseVal.value = bbox.height;
     }
     function hideRect() {
         var border = document.getElementById("border203");
         border.width.baseVal.value = 0;
         border.height.baseVal.value = 0;
     }
   </script>
  </svg>
 </div>
于 2012-09-19T12:11:03.167 に答える
0

親 div の外で svg を取得し、 経由で直接 div にアクセスできます$('div.svg')。

ここにフィドルがあります：http://jsfiddle.net/FSQrz/

于 2012-09-19T12:17:55.267 に答える