如何更改父偏移量而不更改其子偏移量？

Question

我有一個元素定位的問題。我有一個div元素，它還包含svg路徑元素。加價是這樣的：

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

我想設置邊框的路徑元素時左右鼠標懸停用戶的路徑。爲此，我必須訪問path元素的高度和重量，然後將這些值設置爲其父div元素的高度和寬度。爲此，我使用了getBoundingClientRect（）。代碼：

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

這裏我的問題是不能完全解決這個我只得到了邊界，但股利和其子路徑元素的位置是不一樣都有不同的偏移值。所以，爲了這個，我設置的頂部和左側父DIV也：

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

現在，通過這個div得到了正確的位置，但是它的子路徑元素移動離開原有位置。可能是因爲路徑元素是div元素的子元素。所以當我們移動div時，它的所有子元素也會同時移動。我怎麼能改變父div的偏移量值而不改變它的子元素偏移？

Answer 1

您可以將svg放在父div的外面，並通過$('div.svg')直接訪問div。

這裏是小提琴：http://jsfiddle.net/FSQrz/

Answer 2

這是你想要實現的嗎？

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