在svg单元上定位div
在svg单元上定位div
提问于 2014-03-14 09:36:20
我有一个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);回答 2
Stack Overflow用户
回答已采纳
发布于 2014-03-14 09:54:10
你需要重新计算每一次调整的位置，http://jsbin.com/tuqoluwa/1/
Stack Overflow用户
发布于 2014-03-14 09:51:29
我认为您需要重新计算元素在jquery：https://api.jquery.com/resize/调整大小事件中的位置。
$( window ).resize(function() {
//... Do the calculations again and add the new values to your element
});每次调整窗口大小时，都会调用所提供的回调，元素的位置也会发生变化。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22401105
复制相关文章
相似问题
腾讯云开发者
