Question

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

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

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

Answer 1

你能简单地使用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 2

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

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

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的屏幕截图...

Answer 5

我想出了一些仅使用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">علاقه&zwnj;مندی&zwnj;ها</div></div>

Answer 6

在svg上，写标题的正确方法

<svg>
  <title id="unique-id">Checkout</title>
</svg>

在此处查看更多详细信息，https://css-tricks.com/svg-title-vs-html-title-attribute/

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

6 个答案: