Javascript 相对于SVG元素重新定位响应页面的工具提示

我使用SVG矩形和文本元素作为工具提示。它们都在一个SVG元素中，该元素是美国各州的地图

如果我的地图是一个固定高度（我只是在鼠标附近设置svg的坐标），那么工具提示就可以了，但是如果我让我的地图具有响应性，或者如果用户决定放大给定区域，工具提示就会失去功能

见图片：

我的SVG文件位于，因为它对于该站点来说太长了

我只是迷路了。我最初尝试制作一个简单的div工具提示（使用CSS）而不是使用SVG，但它让我的SVG映射的div容器疯狂地“反弹”。我试过D3，但发现自己更糊涂了。我觉得有一些简单的东西我只是忽略了，但我一直在努力实现这个“简单”的功能。任何帮助或指导都将不胜感激

window.onload=function（）{
var panZoom=window.panZoom=svgPanZoom（“#svgObj”{
可缩放：对，
ControlIConseabled:正确，
dblClickZoomEnabled:false，
});
$（窗口）。调整大小（函数（）{
panZoom.resize（）；
panZoom.fit（）；
panZoom.center（）；
})
var EastCoastState=['MA'、'RI'、'CT'、'NJ'，
‘DE’、‘MD’、‘DC’、‘ME’、‘NH’、‘NY’、‘PA’，
‘VA’、‘NC’、‘SC’、‘FL’、‘GA’、‘WV’、‘VT’]；
var svgDoc=$（“#svgObj”）[0].contentDocument；//获取SVG的文档对象
瓦尔县；
$（“路径”，svgDoc）.each（函数（）{
county=$（this.attr（'inkscape:label'）；//县和州的名称缩写，即“德克萨斯州特拉维斯县”
$（本）.attr（“标题”，县）；
$（this.append（“+country+”）；
$（this.removeAttr（'inkscape:label'）；
});
var cssValue；//全局变量，在鼠标输入时存储填充颜色，以便在mouseout中使用
$（“路径”，svgDoc）.mouseenter（函数（事件）{
var current_id=$（this.attr（'id'）；
如果（当前_id！=“分隔符”//忽略任何非县的内容
&&当前\u id！=“状态\u行”
&&当前\u id！=“metadata3671”
&&当前_id！=“defs9561”
&&当前_id！=“基本”
&&当前_id！=“州_边界”）{
var countySt=$（this.attr（'title'）；
var countyStArray=countySt.split（“，”）；
var stateAbr=countyStArray[1]。trim（）；
var countyBahAmount=countiesBah[countySt]；
if（countyBahAmount==未定义）
countyBahAmount=“金额未知”；
var width=4.7*（$（this.attr（'title'）.length+2+countyBahAmount.length）；//根据内部文本长度定义SVG文本框的长度
$（“#文本框”，svgDoc）.attr（'width'，width）；
$（“#textssvg”，svgDoc）.text(
$（this.attr（'title'）+“：”
+countyBahAmount）；
var xPos=event.pageX；
var yPos=event.pageY；
if（eastCoastStates.indexOf（stateAbbr）>-1）{//检查元素是否为东海岸州，
//这将向左偏移工具提示，使其不在视图之外
//做了一些调整，需要修复
$（“#textssvg”，svgDoc）.attr（'x'，xPos-300）；
$（“文本框”，svgDoc）.attr（'x'，xPos-300）；
$（“#textssvg”，svgDoc）.attr（'y'，yPos-91）；
$（“文本框”，svgDoc）.attr（'y'，yPos-100）；
}否则{
$（“#textssvg”，svgDoc）.attr（'x'，xPos-153）；
$（“文本框”，svgDoc）.attr（'x'，xPos-155）；
$（“#textssvg”，svgDoc）.attr（'y'，yPos-120）；
$（“文本框”，svgDoc）.attr（'y'，yPos-130）；
}
$（“#textssvg”，svgDoc）.attr（'visibility'，'display'）；
$（“#文本框”，svgDoc）.attr（'visibility'，'display'）；
}
cssValue=$（this.css（'fill'）；
var classAttr=$（this.attr（'class'）；
var current_id=$（this.attr（'id'）；
如果（当前_id！=“分隔符”&&u当前_id！=“状态线”
&&当前_id！=“svg9559”&当前_id！=“metadata3671”
&&当前_id！=“defs9561”&当前_id！=“基本”
&&当前_id！=“状态_边界”&&u当前_id！=“svg平移缩放重置平移缩放”
&&classAttr！=“svg平移缩放控制元素”&&classAttr！=“svg平移缩放控制背景”）{
css（“填充”、“石灰”）；
}  
});
$（“路径”，svgDoc）.mouseout（函数（）{
$（“#textssvg”，svgDoc）.attr（'visibility'，'hidden'）；
$（“#文本框”，svgDoc）.attr（'visibility'，'hidden'）；
var classAttr=$（this.attr（'class'）；
var current_id=$（this.attr（'id'）；
如果（当前_id！=“分隔符”&&u当前_id！=“状态线”
&&当前_id！=“svg9559”&当前_id！=“metadata3671”
&&当前_id！=“defs9561”&当前_id！=“基本”
&&classAttr！=“svg平移缩放控制元素”&&classAttr！=“svg平移缩放控制背景”）{
$（this，svgDoc）.css（“fill”，cssValue）；//将path元素填充回其原始颜色
}  
});
$（“路径”，svgDoc）.dblclick（函数（）{
var nameSt=$（this.attr（'title'）；
var index=nameSt.indexOf（“，”）；
var county=nameSt.substring（0，索引）；
var stateAbbr=nameSt.substring（索引+1）；
$（“#var1”）.val（country.trim（）+“country”）；
$（“#var2”）.val（stateAbbr.trim（））；
$（“#表格”）.submit（）；
});
}；

每个县的平均巴哈税率
.svg容器{
显示：内联块；
位置：相对位置；
宽度：67%；
垫底：50%；
垂直对齐：中间对齐；
溢出：隐藏；
}
.svg内容{
显示：内联块；
位置：绝对位置；
排名：0；
左：0；
}
Lorem Ipsum只是印刷和排版行业的虚拟文本
Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是最具竞争力的行业
Lorem Ipsum只是一个虚拟文本
// create an SVG DOM point object
pt = pt = svg.createSVGPoint();
pt.x = screenXPosWithinSVG;
pt.y = screenYPosWithinSVG;

// Transform it back to SVG coordinate space
var svgCoord = pt.matrixTransform(svg.getCTM().inverse());

// Place tooltip at (svgCoord.x, svgCoord.y)