如何在不更改其子偏移的情况下更改父偏移值？

Question

I have a problem with element positioning. I have a div element which further contains the svg path element. Mark-up is something like this :

 <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>

I want to set the border around the path element when user mouseover the path. For this i have to access the height and weight of the path element and then set those value as an height and width of its parent div element. For this i used getBoundingClientRect(). Code :

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

Here my problem is not fully solved by this i only get the border, but the position of div and its children path element is not the same both have different offset values. So for this i set the top and left for the parent div also :

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

Now by this div got the correct position but its child path element move away from its position. May be the reason is because the path element is the child of div element. So when we move div , all of its child elements will also move simultaneously. How can i change the parent div offset value without changing its child element offset ?

Answer 1

Is this what you're trying to achieve?

<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>

Answer 2

You could take the svg outside of parent div and access the div directly via $('div.svg') .

Here is a fiddle: http://jsfiddle.net/FSQrz/