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

我对元素定位有问题。我有一个div元素，它进一步包含svg path元素。加价是这样的：

 <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及其子路径元素的位置不一样，它们都有不同的偏移值。为此，我设置了父div的顶部和左侧：

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

---

现在通过这个div得到了正确的位置，但是它的子路径元素离开了它的位置。可能是因为path元素是div元素的子元素。所以当我们移动div时，它的所有子元素也会同时移动。如何在不更改其子元素偏移量的情况下更改父div偏移量值

这就是你想要达到的目标吗

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

函数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；
}
函数{
var border=document.getElementById（“border203”）；
border.width.baseVal.value=0；
border.height.baseVal.value=0；
}

您可以将svg置于父div之外，并通过

$（'div.svg'）

直接访问div

这是一把小提琴：

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