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

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>