Javascript 将div定位在svg元素上

我有一个svg元素，里面有很多不同的节点，每个节点都在一个经过翻译的

中

在我当前的示例中，我使用

var triggerElement = $("#node-@s.Id");
var displayElement = $("#node-@s.Id-hover");
var xy = triggerElement[0].getBoundingClientRect();
displayElement.css("left", xy.left + 50)
                .css("top", xy.top);

这很好，但如果我调整窗口的大小，位置就会变得异常。 调整大小之前： 调整大小后：

这是我的全部代码

<div>
   <svg id="svgelem" xmlns="http://www.w3.org/2000/svg" width="403" height="414">
      <g class="swimlane-art-container"></g>
      <g class="links">
         <line x1="281" y1="307" x2="181" y2="352" stroke="#9F79EE" stroke-width="1"></line>
         <line x1="326" y1="262" x2="281" y2="307" stroke="#9F79EE" stroke-width="1"></line>
         <line x1="61" y1="217" x2="181" y2="352" stroke="#0096d6" stroke-width="1"></line>
         <line x1="61" y1="217" x2="326" y2="262" stroke="#0096d6" stroke-width="1"></line>
         <line x1="136" y1="172" x2="61" y2="217" stroke="#ff2450" stroke-width="1"></line>
         <line x1="231" y1="63.5" x2="371" y2="127" stroke="#167100" stroke-width="1"></line>
         <line x1="231" y1="63.5" x2="136" y2="172" stroke="#167100" stroke-width="1"></line>
      </g>
      <g class="swimlane-nodes">
         <g id="node-1015" transform="translate(16,202)">
            <rect x="0" y="0" width="90" height="30" stroke="#0096d6" fill="#24bdff"></rect>
         </g>
         <g id="node-1016" transform="translate(121,157)">
            <polygon points="15,0 30,15 15,30 0,15" stroke="#ff2450" fill="#ff718d"></polygon>
         </g>
         <g id="node-4" transform="translate(166,337)">
            <circle cx="15" cy="15" r="15" stroke="#9F79EE" fill="#CCCCFF"></circle>
         </g>
         <g id="node-1018" transform="translate(211,30)">
            <rect x="0" y="0" width="30" height="50" stroke="#167100" fill="#8dff71"></rect>
            <rect x="10" y="17" width="30" height="50" stroke="#167100" fill="#8dff71"></rect>
         </g>
         <g id="node-9" transform="translate(266,292)">
            <circle cx="15" cy="15" r="15" stroke="#9F79EE" fill="#CCCCFF"></circle>
         </g>
         <g id="node-1014" transform="translate(311,247)">
            <circle cx="15" cy="15" r="15" stroke="#9F79EE" fill="#CCCCFF"></circle>
         </g>
         <g id="node-1017" transform="translate(356,112)">
            <circle cx="15" cy="15" r="15" stroke="#9F79EE" fill="#CCCCFF"></circle>
         </g>
      </g>
   </svg>
   <div id="hoverContainer">
      <div id="node-4-hover" class="node-hover" style="position: absolute; border: 1px solid; background-color: white; left: 256.8000030517578px; top: 492.20001220703125px; display: none; opacity: 1;">
         <span class="title">Some title here</span>
         <div class="expand" style="display: none;">
            <p>Some desc ere</p>
         </div>
      </div>
      <div id="node-9-hover" class="node-hover" style="position: absolute; display: none; border: 1px solid; background-color: white; left: 356.8000183105469px; top: 447.20001220703125px;">
         <span class="title">Some title here</span>
         <div class="expand" style="display: none;">
            <p>Some desc here</p>
         </div>
      </div>
      <div id="node-1014-hover" class="node-hover" style="position: absolute; display: none; border: 1px solid; background-color: white; left: 401.8000183105469px; top: 402.20001220703125px;">
         <span class="title">Update</span>
         <div class="expand" style="display: none;">
            <p>Update</p>
         </div>
      </div>
      <div id="node-1015-hover" class="node-hover" style="position: absolute; border: 1px solid; background-color: white; left: 106.79999923706055px; top: 357.20001220703125px; display: none; opacity: 1;">
         <span class="title">Merg for handin</span>
         <div class="expand" style="display: none;">
            <p>Merg for handin</p>
         </div>
      </div>
      <div id="node-1016-hover" class="node-hover" style="position: absolute; display: none; border: 1px solid; background-color: white; left: 211.8000030517578px; top: 312.20001220703125px;">
         <span class="title">Merg complete</span>
         <div class="expand" style="display: none;">
            <p></p>
         </div>
      </div>
      <div id="node-1017-hover" class="node-hover" style="position: absolute; border: 1px solid; background-color: white; left: 446.8000183105469px; top: 267.20001220703125px; display: none; opacity: 1;">
         <span class="title">User cases</span>
         <div class="expand" style="display: none;">
            <p></p>
         </div>
      </div>
      <div id="node-1018-hover" class="node-hover" style="position: absolute; border: 1px solid; background-color: white; left: 301.8000030517578px; top: 185.1999969482422px; display: none; opacity: 1;">
         <span class="title">Hand-in 9/3</span>
         <div class="expand" style="display: none;">
            <p></p>
         </div>
      </div>
   </div>
</div>

---

我认为您需要在jquery的resize事件中重新计算元素的位置：

---

每次调整窗口大小时，将调用您提供的回调函数，并且元素的位置将发生更改。

您需要在每次调整大小时重新调整位置，

var triggerElement = $("#node-4");
var displayElement = $("#node-4-hover");
var xy = triggerElement[0].getBoundingClientRect();
displayElement.css("left", xy.left + 50)
              .css("top", xy.top);

var triggerElement = $("#node-9");
var displayElement = $("#node-9-hover");
var xy = triggerElement[0].getBoundingClientRect();
displayElement.css("left", xy.left + 50)
              .css("top", xy.top);

var triggerElement = $("#node-1014");
var displayElement = $("#node-1014-hover");
var xy = triggerElement[0].getBoundingClientRect();
displayElement.css("left", xy.left + 50)
              .css("top", xy.top);

var triggerElement = $("#node-1015");
var displayElement = $("#node-1015-hover");
var xy = triggerElement[0].getBoundingClientRect();
displayElement.css("left", xy.left + 50)
              .css("top", xy.top);

var triggerElement = $("#node-1016");
var displayElement = $("#node-1016-hover");
var xy = triggerElement[0].getBoundingClientRect();
displayElement.css("left", xy.left + 50)
              .css("top", xy.top);

var triggerElement = $("#node-1017");
var displayElement = $("#node-1017-hover");
var xy = triggerElement[0].getBoundingClientRect();
displayElement.css("left", xy.left + 50)
              .css("top", xy.top);

var triggerElement = $("#node-1018");
var displayElement = $("#node-1018-hover");
var xy = triggerElement[0].getBoundingClientRect();
displayElement.css("left", xy.left + 50)
              .css("top", xy.top);

$( window ).resize(function() {
   //... Do the calculations again and add the new values to your element
});