如何将工具提示添加到svg图形？
nac*_*cab 82 javascript svg tooltip d3.js
我有一系列的svg矩形(使用D3.js),我想在鼠标悬停时显示一条消息,消息应该被一个充当背景的框包围.它们应该完全彼此对齐并与矩形(顶部和居中)对齐.做这个的最好方式是什么？
我尝试使用"x","y","width"和"height"属性添加svg文本,然后在svg rect之前添加.问题是文本的参考点在中间(因为我希望它居中对齐我使用text-anchor: middle),但对于矩形,它是左上角坐标,加上我想在文本周围留一点边距,这使得它有点像痛苦
另一种选择是使用一个html div,这很好,因为我可以直接添加文本和填充但我不知道如何获得每个矩形的绝对坐标.有没有办法做到这一点？
Phr*_*ogz 144
你能简单地使用SVG <title>元素和它传达的默认浏览器吗？(注:这是不一样的title,你可以在DIV使用属性/ HTML中IMG /跨度,它需要一个子元素命名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
- 我在 Chrome 80 中没有看到第二个示例的任何工具提示 (12认同)
- 很好的答案.但请注意,在Internet Explorer中不支持`foreignObject` [(https://caniuse.com/#search=foreignObject) (2认同)
- 不幸的是 `<title>` 对移动设备没有影响。 (2认同)
Tim*_*mmm 16
我找到的唯一好方法是使用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>pax*_*man 12
您可以使用标题元素,如Phrogz所示.还有一些很好的工具提示,比如jQuery的Tipsy http://onehackoranother.com/projects/jquery/tipsy/(可用于替换所有标题元素),Bob Monteverde的nvd3甚至Twitter的工具提示来自他们的Bootstrap http:// twitter.github.com/bootstrap/
我的设置总是使用通用 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 的东西。希望对你有帮助
\n.mzhrttltp {\n position: relative;\n display: inline-block;\n}\n.mzhrttltp .hrttltptxt {\n visibility: hidden;\n width: 120px;\n background-color: #040505;\n font-size:13px;color:#fff;font-family:IranYekanWeb;\n text-align: center;\n border-radius: 3px;\n padding: 4px 0;\n position: absolute;\n z-index: 1;\n top: 105%;\n left: 50%;\n margin-left: -60px;\n}\n\n.mzhrttltp .hrttltptxt::after {\n content: "";\n position: absolute;\n bottom: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: transparent transparent #040505 transparent;\n}\n\n.mzhrttltp:hover .hrttltptxt {\n visibility: visible;\n}<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">\xd8\xb9\xd9\x84\xd8\xa7\xd9\x82\xd9\x87‌\xd9\x85\xd9\x86\xd8\xaf\xdb\x8c‌\xd9\x87\xd8\xa7</div></div>| 归档时间： |
|
| 查看次数： |
101894 次 |
| 最近记录： |