javascript - 将 div 定位在 svg 元素上

Question

我有一个 svg 元素，里面有很多不同的节点，每个节点都在翻译的 <g> 中。 .

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

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>

Javascript

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

Answer 1

我认为您需要在 jquery 的调整大小事件中重新计算元素的位置:https://api.jquery.com/resize/

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

每次调整窗口大小时，都会调用您提供的回调，并且元素的位置会发生变化。