Javascript 在SVG中嵌入工具提示的问题

我是一个极简主义者，我在一个有一些限制的网站上工作。出于这些原因，当人们在SVG的关键区域上停留时，我需要交互式工具提示，但我也希望将这种交互性嵌入到SVG本身中。更复杂的是，我对Javascript不是很熟悉。我最初尝试只使用CSS来实现这一点，但不幸的是，我发现当您将CSS嵌入到SVG中时，您无法使用CSS的所有惊人之处。这是一个可以使用的子集，而该子集并没有提供那些很棒的工具提示

所以我开始研究Javascript，它也可以嵌入到SVG中。我真的很喜欢工具提示，我得到的比使用title标签得到的要多得多。然而，仍然存在一些问题

问题之一是以下SVG文件在Chrome中呈现，而不是在Firefox中呈现。Firefox根本不渲染它，我无法确定原因

另一个问题是，即使它在Chrome中渲染，我仍然有一个问题，因为我需要一些相当长的工具提示。这里的多行工具提示处理得不好。任何提示都将不胜感激

.st13{
填充：#d9489b
}
.st13:悬停{
光标：帮助；
填充：#E66E31；
}
#工具提示{
优势基线：悬挂；
字号：8px；
}
盒子
（功能（）{
var svg=document.getElementById（“oidc”）；
var tooltip=svg.getElementById（“工具提示”）；
var tooltipText=tooltip.getElementsByTagName（“文本”）[0]；
var tooltipRects=tooltip.getElementsByTagName（“rect”）；
var triggers=svg.getElementsByClassName（“st13”）；
for（var i=0；i.length；i++）{
触发器[i].addEventListener（“鼠标移动”，showTooltip）；
触发器[i].addEventListener（“mouseout”，hideTooltip）；
}
功能显示工具提示（evt）{
var CTM=svg.getScreenCTM（）；
变量x=（evt.clientX-CTM.e+6）/CTM.a；
变量y=（evt.clientY-CTM.f+20）/CTM.d；
setAttributeNS（null，“转换”，“转换”（+x+“”+y+））；
setAttributeNS（null，“可见性”、“可见”）；
tooltipText.firstChild.data=evt.target.getAttributeNS（null，“数据工具提示文本”）；
var length=tooltipText.getComputedTextLength（）；
对于（var i=0；i tooltipRects.length；i++）{
tooltipRects[i].setAttributeNS（null，“宽度”，长度+8）；
}
}
功能hideTooltip（evt）{
setAttributeNS（null，“可见性”、“隐藏”）；
}
})()

将

元素及其内容移出

元素

您根本不需要

元素，只需将其完全删除即可

---

这是一个Firefox bug，但它是一个边缘问题，很容易解决，大多数人不会将脚本放在switch元素中。

您可以将脚本放在浏览器中，您也可以使用它来代替工具提示“按顺序计算其直接子元素上的requiredFeatures、requiredExtensions和systemLanguage属性，然后处理并呈现这些属性计算为true的第一个子元素。”删除

使我进入Firefox，就是这样，感谢@robert longson！现在处理多行情况。：）