我正在使用SVG构建资源地图。当用户点击单个元素时，我想将弹出窗口放在该元素的中心上。但是，由于地图是通过CSS旋转的，因此技术like this one不成功。
这是我的javascript：
Map.popup = function(e) {
var rect = $(this);
var offset = $(this).offset();
var rectWidth = $(this).attr('width').replace(/[^-\d\.]/g, '');
var rectHeight = $(this).attr('height').replace(/[^-\d\.]/g, '');
var centerX = offset.left - rectWidth/2;
var centerY = offset.top - rectHeight/2;
$('.popup').css({
'top' : centerY,
'left' : centerX,
});
}
这是标记：
<div id="map">
<svg width="1088px" height="1088px" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(288.0 32.0) rotate(45 256.0 512.0)">
<rect id="0" x="8px" y="8px" width="51px" height="230px"></rect>
<rect id="1" x="67px" y="8px" width="112px" height="38px"></rect>
<rect id="2" x="187px" y="8px" width="144px" height="38px"></rect>
<rect id="3" x="339px" y="8px" width="165px" height="38px"></rect>
<rect id="4" x="67px" y="54px" width="112px" height="44px"></rect>
<rect id="5" x="187px" y="54px" width="144px" height="75px"></rect>
<rect id="6" x="339px" y="54px" width="35px" height="24px"></rect>
<rect id="7" x="382px" y="54px" width="122px" height="51px"></rect>
<rect id="8" x="339px" y="86px" width="35px" height="204px"></rect>
<rect id="9" x="67px" y="106px" width="52px" height="132px"></rect>
<rect id="10" x="127px" y="106px" width="52px" height="132px"></rect>
<rect id="11" x="382px" y="113px" width="122px" height="78px" class=""></rect>
<rect id="12" x="187px" y="137px" width="144px" height="70px"></rect>
<rect id="13" x="382px" y="199px" width="122px" height="91px"></rect>
<rect id="14" x="187px" y="215px" width="144px" height="65px"></rect>
<rect id="15" x="8px" y="246px" width="171px" height="58px" class="selected"></rect>
<rect id="16" x="187px" y="288px" width="144px" height="70px"></rect>
<rect id="17" x="339px" y="298px" width="165px" height="60px" class=""></rect>
<rect id="18" x="8px" y="312px" width="171px" height="50px"></rect>
<rect id="19" x="187px" y="366px" width="144px" height="74px"></rect>
<rect id="20" x="339px" y="366px" width="165px" height="28px"></rect>
<rect id="21" x="8px" y="370px" width="171px" height="58px"></rect>
<rect id="22" x="339px" y="402px" width="165px" height="38px"></rect>
<rect id="23" x="8px" y="436px" width="171px" height="70px"></rect>
<rect id="24" x="187px" y="448px" width="87px" height="58px"></rect>
<rect id="25" x="282px" y="448px" width="49px" height="58px"></rect>
<rect id="26" x="339px" y="448px" width="165px" height="58px"></rect>
<rect id="27" x="8px" y="514px" width="171px" height="67px"></rect>
<rect id="28" x="187px" y="514px" width="87px" height="67px"></rect>
<rect id="29" x="282px" y="514px" width="49px" height="67px"></rect>
<rect id="30" x="339px" y="514px" width="19px" height="44px"></rect>
<rect id="31" x="366px" y="514px" width="46px" height="44px"></rect>
<rect id="32" x="420px" y="514px" width="84px" height="22px"></rect>
<rect id="33" x="420px" y="544px" width="84px" height="69px"></rect>
<rect id="34" x="339px" y="566px" width="73px" height="53px"></rect>
<rect id="35" x="8px" y="589px" width="171px" height="55px"></rect>
<rect id="36" x="187px" y="589px" width="24px" height="36px"></rect>
<rect id="37" x="219px" y="589px" width="112px" height="36px"></rect>
<rect id="38" x="420px" y="621px" width="84px" height="71px"></rect>
<rect id="39" x="339px" y="627px" width="73px" height="99px"></rect>
<rect id="40" x="187px" y="633px" width="24px" height="105px"></rect>
<rect id="41" x="219px" y="633px" width="112px" height="105px"></rect>
<rect id="42" x="8px" y="652px" width="103px" height="36px"></rect>
<rect id="43" x="119px" y="652px" width="60px" height="179px"></rect>
<rect id="44" x="8px" y="696px" width="103px" height="49px"></rect>
<rect id="45" x="420px" y="700px" width="84px" height="26px"></rect>
<rect id="46" x="339px" y="734px" width="165px" height="46px"></rect>
<rect id="47" x="187px" y="746px" width="24px" height="85px"></rect>
<rect id="48" x="219px" y="746px" width="112px" height="34px"></rect>
<rect id="49" x="8px" y="753px" width="103px" height="122px"></rect>
<rect id="50" x="219px" y="788px" width="112px" height="43px"></rect>
<rect id="51" x="339px" y="788px" width="165px" height="43px"></rect>
<rect id="52" x="119px" y="839px" width="92px" height="177px"></rect>
<rect id="53" x="219px" y="839px" width="46px" height="177px"></rect>
<rect id="54" x="273px" y="839px" width="58px" height="53px"></rect>
<rect id="55" x="339px" y="839px" width="58px" height="53px"></rect>
<rect id="56" x="405px" y="839px" width="99px" height="53px"></rect>
<rect id="57" x="8px" y="883px" width="103px" height="39px"></rect>
<rect id="58" x="273px" y="900px" width="124px" height="116px"></rect>
<rect id="59" x="405px" y="900px" width="19px" height="116px"></rect>
<rect id="60" x="432px" y="900px" width="72px" height="116px"></rect>
<rect id="61" x="8px" y="930px" width="103px" height="86px"></rect>
</g>
</svg>
</div>
您可以在此处查看地图的版本（及其不完美的定位）：http://cityasacampus.org/map/。
关于如何更好地瞄准每个中心的任何想法？
答案 0 :(得分：2)
首先需要使用getBoundingClientRect（）来获取所点击的SVG元素的边界区域的实际宽度，因为它现在已经旋转了。然后你需要将其中的一半添加到偏移而不是减去，这将使你的弹出窗口左上角位于SVG点击元素的中心。
如果你还从centerX计算中取出250px（弹出元素的宽度），弹出箭头点（右上角）应该很好地位于被点击元素的中间。
新代码：
:help after-directory答案 1 :(得分：2)
正如@sjm指出的那样，你可以使用getBoundingCliendRect()来获得“真实”的身高/宽度，但它不适用于$(this)。
Map.popup = function(e) {
var rect = $(this);
offset = $(this).offset(),
canvas = document.getElementById(rect.prop('id')),
rectWidth = canvas.getBoundingClientRect().width,
rectHeight = canvas.getBoundingClientRect().height,
popoverWidth = 250,
popoverHeight = $('.popup').height(),
centerX = offset.left - popoverWidth + rectWidth/2,
centerY = offset.top + rectHeight/2;
$('.popup').css({
'top' : centerY,
'left' : centerX,
});
}
而且您的centerX和centerY错了，我已经纠正了。
干杯！