我有一系列 svg 矩形（使用 D3.js），我想在鼠标悬停时显示一条消息，该消息应该被一个充当背景的框包围。它们都应该彼此完美对齐，并与矩形（顶部和居中）对齐。做这个的最好方式是什么？
我尝试使用“x”、“y”、“width”和“height”属性添加一个 svg 文本，然后在前面添加一个 svg rect。问题是文本的参考点在中间（因为我希望它居中对齐，所以我使用text-anchor: middle了），但是对于矩形，它是左上角坐标，加上我想要在文本周围留一点边距，这使它有点一种痛苦。
另一种选择是使用 html div，这很好，因为我可以直接添加文本和填充，但我不知道如何获取每个矩形的绝对坐标。有没有办法做到这一点？
你能简单地使用SVG<title>元素和它所传达的默认浏览器渲染吗？（注意：这和你可以在 html 中的 div/img/spans 上使用的title属性不同，它需要是一个名为的子元素title）
rect {
width: 100%;
height: 100%;
fill: #69c;
stroke: #069;
stroke-width: 5px;
opacity: 0.5
}<p>Mouseover the rect to see the tooltip on supporting browsers.</p>
<svg xmlns="http://www.w3.org/2000/svg">
<rect>
<title>Hello, World!</title>
</rect>
</svg>或者，如果你真的想在你的 SVG 中显示 HTML，你可以直接嵌入 HTML：
rect {
width: 100%;
height: 100%;
fill: #69c;
stroke: #069;
stroke-width: 5px;
opacity: 0.5
}
foreignObject {
width: 100%;
}
svg div {
text-align: center;
line-height: 150px;
}<svg xmlns="http://www.w3.org/2000/svg">
<rect/>
<foreignObject>
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
Hello, <b>World</b>!
</div>
</body>
</foreignObject>
</svg>…但是你需要 JS 来打开和关闭显示。如上所示，使标签出现在正确位置的一种方法是将 rect 和 HTML 包装在同一<g>位置，从而将它们放在一起。
要使用 JS 查找 SVG 元素在屏幕上的位置，可以使用getBoundingClientRect()，例如http://phrogz.net/svg/html_location_in_svg_in_html.xhtml
我发现的唯一好方法是使用 Javascript 来移动工具提示<div>。显然，这只有在 HTML 文档中有 SVG 时才有效——不是独立的。它需要Javascript。
function showTooltip(evt, text) {
let tooltip = document.getElementById("tooltip");
tooltip.innerHTML = text;
tooltip.style.display = "block";
tooltip.style.left = evt.pageX + 10 + 'px';
tooltip.style.top = evt.pageY + 10 + 'px';
}
function hideTooltip() {
var tooltip = document.getElementById("tooltip");
tooltip.style.display = "none";
}#tooltip {
background: cornsilk;
border: 1px solid black;
border-radius: 5px;
padding: 5px;
}<div id="tooltip" display="none" style="position: absolute; display: none;"></div>
<svg>
<rect width="100" height="50" style="fill: blue;" onmousemove="showTooltip(evt, 'This is blue');" onmouseout="hideTooltip();" >
</rect>
</svg>您可以使用标题元素，如 Phrogz 所示。还有一些不错的工具提示，例如 jQuery 的 Tipsy http://onehackoranother.com/projects/jquery/tipsy/（可用于替换所有标题元素）、Bob Monteverde 的 nvd3 甚至 Twitter 的 Bootstrap 的工具提示http:// twitter.github.com/bootstrap/
在svg上，写标题的正确方法
<svg>
<title id="unique-id">Checkout</title>
</svg>
在此处查看更多详细信息https://css-tricks.com/svg-title-vs-html-title-attribute/
我的设置总是使用通用的 CSS 标题。我只是为我的博客管理页面构建分析。我不需要任何花哨的东西。这是一些代码...
let comps = g.selectAll('.myClass')
.data(data)
.enter()
.append('rect')
...styling...
...transitions...
...whatever...
g.selectAll('.myClass')
.append('svg:title')
.text((d, i) => d.name + '-' + i);
还有chrome的截图...
我想出了一些只使用 HTML + CSS 的东西。希望对你有帮助
.mzhrttltp {
position: relative;
display: inline-block;
}
.mzhrttltp .hrttltptxt {
visibility: hidden;
width: 120px;
background-color: #040505;
font-size:13px;color:#fff;font-family:IranYekanWeb;
text-align: center;
border-radius: 3px;
padding: 4px 0;
position: absolute;
z-index: 1;
top: 105%;
left: 50%;
margin-left: -60px;
}
.mzhrttltp .hrttltptxt::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #040505 transparent;
}
.mzhrttltp:hover .hrttltptxt {
visibility: visible;
}<div class="mzhrttltp"><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#e2062c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><div class="hrttltptxt">علاقه‌مندی‌ها</div></div>我将heroicons用于我正在从事的项目。（这是 JSX 格式）我将使用此代码处理工具提示问题。
<svg className="h-6 w-6">
<title>{reasons.join(" ")}</title>
<QuestionMarkCircleIcon className={style} />
</svg>