javascript - 如何更改父偏移值而不更改其子偏移？

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>

当用户将鼠标悬停在路径上时，我想设置路径元素周围的边框。为此，我必须访问路径元素的高度和重量，然后将这些值设置为其父 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 偏移值而不更改其子元素偏移量？

Answer 1

您可以将 svg 放在父 div 之外，并通过 $('div.svg') 直接访问该 div。

这是一个 fiddle :http://jsfiddle.net/FSQrz/