1
我有一个svg元素，里面有很多不同的节点，每个节点都在翻译的<g>内。svg元素定位div
在我目前的例子做我用
var triggerElement = $("#[email protected]");
var displayElement = $("#[email protected]");
var xy = triggerElement[0].getBoundingClientRect();
displayElement.css("left", xy.left + 50)
.css("top", xy.top);
这workes罚款，但如果我调整窗口的大小做positning出去怪人。 前调整大小： 
调整大小后： 
这里是我完整的代码
<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);