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

Question

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

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

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

Answer 1

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

Answer 2

你能简单地使用SVG <title> element和它传达的默认浏览器吗？（注意：这与你可以在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

Answer 3

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

Answer 4

我总是使用我的设置使用通用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的截图......

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

问题描述投票：74回答：4

4个回答

最新问题

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

问题描述 投票：74回答：4

4个回答

最新问题

问题描述投票：74回答：4