如何将工具提示添加到svg图形？-Java 学习之路

我有一系列的svg矩形（使用D3.js），我想在鼠标悬停时显示一条消息，消息应该被一个充当背景的框包围 . 它们应该彼此完美地对齐并且与矩形（在顶部和居中）完全对齐 . 做这个的最好方式是什么？

我尝试使用"x"，"y"，"width"和"height"属性添加svg文本，然后在svg rect之前添加 . 问题是文本的参考点在中间（因为我希望它居中对齐我使用了 text-anchor: middle ），但对于矩形它是左上角坐标，加上我想在文本周围留一点边距使它变得友好痛苦

另一种选择是使用一个html div，这很好，因为我可以直接添加文本和填充但我不知道如何获得每个矩形的绝对坐标 . 有没有办法做到这一点？

4 回答

11

您可以使用 Headers 元素，如Phrogz所示 . 还有一些很好的工具提示，比如jQuery的Tipsy http://onehackoranother.com/projects/jquery/tipsy/（可用于替换所有 Headers 元素），Bob Monteverde 's nvd3 or even the Twitter'的工具提示来自他们的Bootstrap http://twitter.github.com/bootstrap/

回复于 2024-04-27T17:21:01+08:00

117

你能简单地使用SVG <title> element和它传达的默认浏览器吗？（注意：这是 not 与你可以在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包装在同一个_713084中，将它们放在一起 .

要使用JS查找屏幕上SVG元素的位置，可以使用 getBoundingClientRect() ，例如http://phrogz.net/svg/html_location_in_svg_in_html.xhtml

回复于 2024-04-27T17:21:01+08:00

我找到的唯一好方法是使用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>

回复于 2024-04-27T17:21:01+08:00

1
我总是使用我的设置使用通用css Headers . 我只是为我的博客管理页面构建分析 . 我不需要任何花哨的东西 . 这是一些代码......
```
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的截图......
回复于 2024-04-27T17:21:01+08:00

如何将工具提示添加到svg图形？

4 回答

相关问题